:root {
    --brand: #128c7e;
    --brand-dark: #075e54;
    --brand-light: #25d366;
    --sidebar-bg: #0f1d2b;
    --sidebar-fg: #a9b6c3;
    --sidebar-w: 250px;
    --page-bg: #f3f6f9;
    --bs-primary: #128c7e;
    --bs-primary-rgb: 18, 140, 126;
    --bs-link-color: #128c7e;
    --bs-link-color-rgb: 18, 140, 126;
    --bs-link-hover-color: #075e54;
}

body { background: var(--page-bg); }

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-dark);
}
.text-bg-primary { background-color: var(--brand) !important; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.page-link { color: var(--brand); }
.active > .page-link { background-color: var(--brand); border-color: var(--brand); }

/* ---------- sidebar ---------- */
.sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
    background: var(--sidebar-bg); color: var(--sidebar-fg);
    display: flex; flex-direction: column; z-index: 1040;
    transition: transform .2s ease;
}
.brand {
    display: flex; align-items: center; gap: .65rem; padding: 1.1rem 1.25rem;
    color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-light), var(--brand)); color: #fff; font-size: 1.15rem;
}
.brand-icon.lg { width: 56px; height: 56px; font-size: 1.8rem; border-radius: 16px; }
.side-nav { overflow-y: auto; padding: .5rem 0 1.5rem; flex: 1; }
.nav-section {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
    color: #5f7183; padding: 1rem 1.25rem .35rem;
}
.nav-item {
    display: flex; align-items: center; gap: .7rem; padding: .5rem 1.25rem; margin: 1px .6rem;
    color: var(--sidebar-fg); text-decoration: none; border-radius: 8px; font-size: .92rem;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: var(--brand); color: #fff; }
.nav-item.locked { opacity: .55; }
.nav-item .bi { font-size: 1.05rem; }

/* ---------- main ---------- */
.main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 1020; background: #fff;
    display: flex; align-items: center; gap: .75rem; padding: .7rem 1.5rem;
    border-bottom: 1px solid #e6ebf0;
}
.page-title { font-size: 1.15rem; margin: 0; font-weight: 600; }
.content { padding: 1.5rem; flex: 1; }
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 600; font-size: .85rem;
}
.wa-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #e9eef2; }

.card { border: 1px solid #e6ebf0; border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: #fff; border-bottom: 1px solid #eef2f5; font-weight: 600; padding: .85rem 1.1rem; }
.table > :not(caption) > * > * { padding: .65rem .8rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7a89; font-weight: 600; background: #fafbfc; }

.stat-card { display: flex; align-items: center; gap: 1rem; }
.stat-icon {
    width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.35rem; flex-shrink: 0;
}
.stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stat-label { color: #6b7a89; font-size: .85rem; }
.bg-soft-green { background: #e3f7ec; color: #128c7e; }
.bg-soft-blue { background: #e4efff; color: #2563eb; }
.bg-soft-orange { background: #fff1e0; color: #d97706; }
.bg-soft-red { background: #fde8e8; color: #dc2626; }
.bg-soft-purple { background: #f0e8ff; color: #7c3aed; }

.empty { text-align: center; padding: 3rem 1rem; color: #6b7a89; }
.empty .bi { font-size: 2.5rem; display: block; margin-bottom: .5rem; color: #b8c4cf; }

.qr-box {
    width: 300px; height: 300px; max-width: 100%; margin: 0 auto; border: 1px dashed #c9d3dc; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; background: #fff;
}
.qr-box img { width: 100%; height: 100%; object-fit: contain; }

.chart-bars { display: flex; align-items: flex-end; gap: .6rem; height: 160px; padding-top: 1rem; }
.chart-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; height: 100%; justify-content: flex-end; }
.chart-bar .bar { width: 100%; max-width: 38px; border-radius: 6px 6px 0 0; background: var(--brand); min-height: 2px; }
.chart-bar .bar.failed { background: #f87171; }
.chart-bar small { color: #6b7a89; font-size: .72rem; }

.file-thumb { height: 120px; background: #f1f4f7; border-radius: 8px 8px 0 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-thumb .bi { font-size: 2.5rem; color: #8a9aa9; }

.progress { height: 8px; }
pre.code { background: #0f1d2b; color: #d6e2ee; padding: 1rem; border-radius: 8px; font-size: .82rem; white-space: pre-wrap; word-break: break-all; }
.form-text code { font-size: .8rem; }

/* ---------- guest (login, sign up, codes) ---------- */
body.guest { background: #f4f7fa; min-height: 100vh; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 44%) 1fr; }
.auth-aside {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
    padding: 2.5rem 3rem; color: #fff;
    background:
        radial-gradient(700px 380px at 0% 0%, rgba(37,211,102,.35), transparent 60%),
        radial-gradient(600px 420px at 100% 100%, rgba(99,102,241,.32), transparent 60%),
        linear-gradient(150deg, #0a1322 0%, #0f2236 55%, #0b2e2a 100%);
}
.auth-aside::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
}
.auth-aside > * { position: relative; }
.auth-brand { display: inline-flex; align-items: center; gap: .35rem; color: inherit; text-decoration: none; font-weight: 700; font-size: 1.15rem; }
.auth-brand:hover { color: inherit; }
.auth-brand .brand-logo-mark { height: 44px; width: auto; max-width: 48px; object-fit: contain; }
.auth-brand .brand-icon { width: 44px; height: 44px; font-size: 1.35rem; border-radius: 12px; }
.auth-pitch h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; max-width: 15ch; }
.auth-pitch > p { color: rgba(255,255,255,.7); font-size: 1.05rem; max-width: 36ch; margin: 1rem 0 2rem; }
.auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.auth-points li {
    display: flex; gap: .9rem; align-items: center; padding: .85rem 1rem; max-width: 380px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; backdrop-filter: blur(6px);
}
.auth-points .bi { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(37,211,102,.16); color: #4ade80; font-size: 1.1rem; }
.auth-points strong { display: block; font-size: .95rem; }
.auth-points span { color: rgba(255,255,255,.62); font-size: .84rem; }
.auth-aside-foot { color: rgba(255,255,255,.45); font-size: .82rem; }

.auth-main { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth-card { width: 100%; max-width: 430px; background: #fff; border: 1px solid #e8edf2; border-radius: 22px; padding: 2.25rem; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 24px 48px -16px rgba(16,24,40,.14); }
.auth-card.wide { max-width: 620px; }
.auth-brand-mobile { display: none; color: #0f172a; margin-bottom: 1.5rem; }
.auth-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .35rem; color: #0f172a; }
.auth-sub { color: #64748b; margin-bottom: 1.5rem; }
.auth-card .form-label { font-weight: 600; font-size: .86rem; color: #334155; }
.auth-card .form-control { border-radius: 11px; padding-top: .6rem; padding-bottom: .6rem; border-color: #dfe5ec; }
.auth-card .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(18,140,126,.12); }
.auth-card .btn-lg { border-radius: 12px; font-size: 1rem; font-weight: 600; padding: .7rem 1rem; }

.input-icon { position: relative; }
.input-icon > .bi { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; z-index: 4; }
.input-icon > .form-control { padding-left: 2.55rem; }
.input-icon > .form-control:has(~ .pw-toggle) { padding-right: 2.75rem; }
.pw-toggle { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: #94a3b8; padding: .35rem .55rem; border-radius: 8px; z-index: 4; }
.pw-toggle:hover { color: #334155; background: #f1f5f9; }

.btn-social {
    display: flex; align-items: center; justify-content: center; gap: .65rem; padding: .7rem 1rem;
    background: #fff; border: 1px solid #dadce0; border-radius: 12px; font-weight: 600; color: #1f2937;
    transition: background .15s, box-shadow .15s;
}
.btn-social:hover { background: #f8fafc; border-color: #c6cbd1; box-shadow: 0 2px 8px rgba(16,24,40,.06); color: #111827; }
.btn-whatsapp { --bs-btn-bg: #25d366; --bs-btn-border-color: #25d366; --bs-btn-color: #fff; --bs-btn-hover-bg: #1ebe5b; --bs-btn-hover-border-color: #1ebe5b; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #19a94f; --bs-btn-active-color: #fff; }
.auth-divider { display: flex; align-items: center; gap: .9rem; margin: 1.35rem 0; color: #94a3b8; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #e5eaf0; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: #f1f5f9; border-radius: 12px; margin-bottom: 1.25rem; }
.auth-tab { border: 0; background: none; padding: .55rem; border-radius: 9px; font-weight: 600; font-size: .9rem; color: #64748b; transition: all .15s; }
.auth-tab.active { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(16,24,40,.12); }
.auth-tab .bi-whatsapp { color: #25d366; }
.auth-note { display: flex; gap: .6rem; align-items: center; padding: .7rem .9rem; background: #ecfdf3; color: #166534; border-radius: 12px; font-size: .86rem; }

.google-chip { display: flex; align-items: center; gap: .85rem; padding: .8rem 1rem; border: 1px solid #e5eaf0; background: #f8fafc; border-radius: 14px; margin-bottom: 1.5rem; }
.google-chip img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.google-chip-logo { width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid #e5eaf0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.otp-hero { text-align: center; color: #475569; margin-bottom: 1.5rem; }
.auth-card:has(.otp-hero) .auth-title { text-align: center; margin-bottom: 1.25rem; }
.otp-icon { width: 68px; height: 68px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; margin-bottom: 1rem; background: linear-gradient(135deg, #25d366, #128c7e); box-shadow: 0 10px 24px -6px rgba(37,211,102,.55), 0 0 0 8px rgba(37,211,102,.12); }
.otp-hero strong { color: #0f172a; font-size: 1.05rem; }
.auth-card .otp-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.9rem; font-weight: 700; text-align: center; letter-spacing: .55em; padding: .7rem 0 .7rem .55em; border-radius: 14px; border-width: 2px; }
.otp-input::placeholder { color: #cbd5e1; }

.pw-meter { display: flex; align-items: center; gap: .75rem; }
.pw-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; flex: 1; }
.pw-bars span { height: 5px; border-radius: 4px; background: #e2e8f0; transition: background .2s; }
.pw-meter.lv1 .pw-bars span:nth-child(-n+1) { background: #ef4444; }
.pw-meter.lv2 .pw-bars span:nth-child(-n+2) { background: #f59e0b; }
.pw-meter.lv3 .pw-bars span:nth-child(-n+3) { background: #84cc16; }
.pw-meter.lv4 .pw-bars span { background: #16a34a; }
.pw-label { font-size: .78rem; color: #64748b; min-width: 110px; text-align: right; }
.pw-rules { list-style: none; padding: 0; margin: .65rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .3rem .75rem; font-size: .82rem; color: #64748b; }
.pw-rules li.ok { color: #15803d; }
.pw-rules li.ok .bi::before { content: "\f26a"; }

@media (max-width: 991.98px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
    .auth-brand-mobile { display: inline-flex; }
}
@media (max-width: 575.98px) {
    .auth-main { padding: 1rem; align-items: flex-start; }
    .auth-card { padding: 1.5rem 1.25rem; border-radius: 18px; }
}

/* ---------- control center (admin settings) ---------- */
.cc { --cc-ink: #0f172a; --cc-muted: #64748b; --cc-line: #e6ebf1; --cc-soft: #f6f8fb; color: var(--cc-ink); }
.cc-muted { color: var(--cc-muted); }
.cc-hero {
    position: relative; overflow: hidden; border-radius: 22px; padding: 1.9rem 2rem; color: #fff; margin-bottom: 1.5rem;
    display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 1.5rem; align-items: center;
    background:
        radial-gradient(900px 300px at 0% -30%, rgba(37,211,102,.38), transparent 60%),
        radial-gradient(700px 360px at 100% 0%, rgba(99,102,241,.38), transparent 62%),
        linear-gradient(135deg, #0a1322 0%, #10223a 60%, #0c2f2b 100%);
    box-shadow: 0 24px 48px -24px rgba(10,19,34,.55);
}
.cc-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 36px 36px; mask-image: linear-gradient(90deg, #000, transparent 70%);
}
.cc-hero > * { position: relative; }
.cc-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #6ee7b7; background: rgba(110,231,183,.1); border: 1px solid rgba(110,231,183,.25); padding: .3rem .7rem; border-radius: 999px; }
.cc-hero h2 { font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; margin: .8rem 0 .35rem; }
.cc-hero p { color: rgba(255,255,255,.68); margin: 0; }
.cc-hero p strong { color: #fff; }
.cc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.cc-stat { display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.cc-stat-icon { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); color: #a7f3d0; font-size: 1.05rem; }
.cc-stat strong { display: block; font-size: 1.3rem; line-height: 1.1; font-weight: 800; }
.cc-stat strong small { font-size: .8rem; color: rgba(255,255,255,.5); font-weight: 600; }
.cc-stat span { font-size: .76rem; color: rgba(255,255,255,.6); }
.cc-stat.alert-stat .cc-stat-icon { background: rgba(248,113,113,.18); color: #fca5a5; }

.cc-body { display: grid; grid-template-columns: 270px 1fr; gap: 1.5rem; align-items: start; }
.cc-nav { position: sticky; top: 78px; background: #fff; border: 1px solid var(--cc-line); border-radius: 18px; padding: .5rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.cc-nav-item { position: relative; display: flex; align-items: center; gap: .75rem; padding: .65rem .7rem; border-radius: 12px; text-decoration: none; color: var(--cc-ink); transition: background .15s; }
.cc-nav-item + .cc-nav-item { margin-top: 2px; }
.cc-nav-item:hover { background: var(--cc-soft); color: var(--cc-ink); }
.cc-nav-icon { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--cc-soft); color: #475569; font-size: 1.02rem; transition: all .2s; }
.cc-nav-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cc-nav-text strong { font-size: .9rem; font-weight: 600; }
.cc-nav-text small { font-size: .74rem; color: var(--cc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-nav-item.active { background: linear-gradient(90deg, rgba(18,140,126,.11), rgba(18,140,126,.02)); }
.cc-nav-item.active::before { content: ''; position: absolute; left: -.5rem; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.cc-nav-item.active .cc-nav-icon { background: linear-gradient(135deg, var(--brand-light), var(--brand)); color: #fff; box-shadow: 0 6px 14px -6px rgba(18,140,126,.7); }
.cc-dot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.cc-dot.ok { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.cc-dot.warn { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.cc-dot.bad { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
.cc-dot.off { background: #cbd5e1; }

.cc-pane { animation: cc-in .25s ease; }
@keyframes cc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cc-pane-head { margin-bottom: 1.1rem; }
.cc-pane-head h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.015em; margin: 0 0 .25rem; }
.cc-pane-head p { color: var(--cc-muted); margin: 0; max-width: 70ch; }
.cc-card { background: #fff; border: 1px solid var(--cc-line); border-radius: 18px; padding: 1.25rem 1.4rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.cc-card + .cc-card, .row + .cc-card, .cc-banner + .row, .cc-banner + .cc-card, .cc-methods + .cc-card, .cc-hint + .cc-card { margin-top: 1rem; }
.cc-card-title { display: flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #475569; margin-bottom: 1rem; }
.cc-card-title .bi { color: var(--brand); font-size: .95rem; }
.cc-card .form-label { font-weight: 600; font-size: .85rem; color: #334155; }
.cc-card .form-control, .cc-card .form-select { border-radius: 10px; border-color: #dfe5ec; }
.cc-card .input-group > :first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.cc-card .input-group > :last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.cc-hint { display: flex; gap: .5rem; align-items: flex-start; font-size: .84rem; color: var(--cc-muted); }
.cc-hint .bi { color: var(--brand); margin-top: 1px; }
.cc-link { font-size: .8rem; font-weight: 600; text-decoration: none; margin-left: auto; }

.cc-row { display: flex; align-items: center; gap: 1.25rem; padding: .9rem 0; }
.cc-row + .cc-row { border-top: 1px solid #eef2f6; }
.cc-card > .cc-row:first-child { padding-top: .1rem; }
.cc-card > .cc-row:last-child { padding-bottom: .1rem; }
.cc-row > div { flex: 1; min-width: 0; }
.cc-row strong { display: block; font-size: .93rem; font-weight: 600; }
.cc-row small { display: block; color: var(--cc-muted); font-size: .82rem; margin-top: .1rem; }
.cc-select { max-width: 260px; }

/* toggle switch */
.cc-toggle { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 46px; height: 26px; border-radius: 999px; background: #cbd5e1; position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.cc-toggle::before { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .22s cubic-bezier(.3,1.4,.6,1); }
.cc-toggle:checked { background: linear-gradient(135deg, var(--brand-light), var(--brand)); }
.cc-toggle:checked::before { transform: translateX(20px); }
.cc-toggle:focus-visible { outline: 3px solid rgba(18,140,126,.35); outline-offset: 2px; }

/* segmented control */
.cc-seg { position: relative; display: inline-flex; padding: 4px; gap: 2px; background: #f1f5f9; border-radius: 12px; flex-shrink: 0; }
.cc-seg input { position: absolute; opacity: 0; pointer-events: none; }
.cc-seg label { padding: .38rem .85rem; border-radius: 9px; font-size: .82rem; font-weight: 600; color: var(--cc-muted); cursor: pointer; margin: 0; transition: all .15s; white-space: nowrap; }
.cc-seg label:hover { color: var(--cc-ink); }
.cc-seg input:checked + label { background: #fff; color: var(--cc-ink); box-shadow: 0 1px 3px rgba(16,24,40,.14); }
.cc-seg input:focus-visible + label { outline: 2px solid rgba(18,140,126,.4); }

/* pills & banners */
.cc-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 600; padding: .22rem .6rem; border-radius: 999px; white-space: nowrap; }
.cc-pill.ok { background: #dcfce7; color: #15803d; }
.cc-pill.warn { background: #fef3c7; color: #b45309; }
.cc-pill.lock { background: #f1f5f9; color: #64748b; }
.cc-banner { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 16px; border: 1px solid; }
.cc-banner strong { display: block; font-size: .95rem; }
.cc-banner small { display: block; font-size: .84rem; opacity: .85; }
.cc-banner-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #fff; flex-shrink: 0; font-size: 1.25rem; box-shadow: 0 1px 3px rgba(16,24,40,.1); }
.cc-banner.ok { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.cc-banner.ok .cc-banner-icon { color: #16a34a; }
.cc-banner.warn { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.cc-banner.warn .cc-banner-icon { color: #d97706; }
.cc-banner.bad { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.cc-banner.bad .cc-banner-icon { color: #dc2626; }

/* sign-in method cards */
.cc-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.cc-method {
    position: relative; display: flex; flex-direction: column; gap: .3rem; cursor: pointer; margin: 0;
    padding: 1.1rem 1.15rem 1rem; background: #fff; border: 1.5px solid var(--cc-line); border-radius: 18px;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cc-method:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(16,24,40,.25); }
.cc-method:has(.cc-method-input:checked) { border-color: rgba(18,140,126,.55); box-shadow: 0 0 0 4px rgba(18,140,126,.08), 0 12px 28px -16px rgba(18,140,126,.45); background: linear-gradient(180deg, #fff, #f7fdfb); }
.cc-method-input { position: absolute; opacity: 0; pointer-events: none; }
.cc-method-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: .55rem; }
.cc-method-icon { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.tone-blue { background: #e0ecff; color: #2563eb; }
.tone-violet { background: #ede9fe; color: #7c3aed; }
.tone-amber { background: #fef3c7; color: #d97706; }
.tone-green { background: #dcfce7; color: #16a34a; }
.tone-google { background: #fff; border: 1px solid var(--cc-line); }
.cc-method strong { font-size: .97rem; font-weight: 700; }
.cc-method > small { color: var(--cc-muted); font-size: .82rem; line-height: 1.45; flex: 1; }
.cc-method-foot { display: flex; align-items: center; margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed #e5eaf0; }
.cc-switch { width: 42px; height: 24px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .2s; flex-shrink: 0; }
.cc-switch::before { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .22s cubic-bezier(.3,1.4,.6,1); }
.cc-method-input:checked ~ .cc-method-top .cc-switch { background: linear-gradient(135deg, var(--brand-light), var(--brand)); }
.cc-method-input:checked ~ .cc-method-top .cc-switch::before { transform: translateX(18px); }
.cc-method-input:focus-visible ~ .cc-method-top .cc-switch { outline: 3px solid rgba(18,140,126,.35); outline-offset: 2px; }
.cc-method.shake { animation: cc-shake .45s; border-color: #f87171; }
@keyframes cc-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* login page preview */
.cc-preview { border-radius: 14px; padding: 1.75rem 1rem; background: radial-gradient(circle at 20% 0%, rgba(37,211,102,.12), transparent 50%), linear-gradient(180deg, #f8fafc, #eef2f7); display: flex; justify-content: center; }
.pv-card { width: 100%; max-width: 290px; background: #fff; border-radius: 16px; padding: 1.1rem; box-shadow: 0 18px 40px -18px rgba(16,24,40,.35); font-size: .72rem; }
.pv-brand { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .78rem; }
.pv-brand .brand-icon { width: 22px; height: 22px; border-radius: 7px; font-size: .75rem; }
.pv-title { font-size: 1rem; font-weight: 800; margin: .65rem 0 .6rem; }
.pv-google { display: flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid #dadce0; border-radius: 8px; padding: .4rem; font-weight: 600; }
.pv-divider { display: flex; align-items: center; gap: .5rem; color: #94a3b8; margin: .55rem 0; font-size: .62rem; text-transform: uppercase; }
.pv-divider::before, .pv-divider::after { content: ''; flex: 1; height: 1px; background: #e5eaf0; }
.pv-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; background: #f1f5f9; border-radius: 8px; margin-bottom: .55rem; }
.pv-tabs span { text-align: center; padding: .28rem; border-radius: 6px; color: #64748b; font-weight: 600; }
.pv-tabs span.active { background: #fff; color: var(--cc-ink); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.pv-tabs .bi-whatsapp { color: #25d366; }
.pv-label { font-weight: 600; color: #334155; margin: .35rem 0 .2rem; }
.pv-input { height: 24px; border: 1px solid #dfe5ec; border-radius: 7px; }
.pv-btn { margin-top: .65rem; text-align: center; color: #fff; font-weight: 600; padding: .4rem; border-radius: 8px; background: var(--brand); }
[data-pv][hidden] { display: none !important; }

/* sign-up fields */
.cc-fields { display: grid; gap: .55rem; }
.cc-field { display: flex; align-items: center; gap: .9rem; padding: .7rem .8rem; border: 1px solid #eef2f6; border-radius: 14px; background: var(--cc-soft); }
.cc-field > div { flex: 1; min-width: 0; }
.cc-field strong { display: block; font-size: .9rem; font-weight: 600; }
.cc-field small { color: var(--cc-muted); font-size: .78rem; }
.cc-field-icon { width: 36px; height: 36px; border-radius: 10px; background: #fff; border: 1px solid var(--cc-line); display: inline-flex; align-items: center; justify-content: center; color: #475569; flex-shrink: 0; }
.cc-field .cc-seg { background: #e8edf3; }

/* google steps */
.cc-steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: .85rem; }
.cc-steps li { counter-increment: step; position: relative; padding-left: 2.4rem; font-size: .87rem; color: #334155; line-height: 1.5; }
.cc-steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #4285f4, #34a853); }

/* whatsapp preview */
.cc-sticky { position: sticky; top: 78px; }
.cc-wa { border-radius: 18px; overflow: hidden; border: 1px solid var(--cc-line); box-shadow: 0 18px 40px -22px rgba(16,24,40,.4); }
.cc-wa-head { display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem; background: #075e54; color: #fff; }
.cc-wa-head strong { display: block; font-size: .92rem; }
.cc-wa-head small { font-size: .74rem; opacity: .75; }
.cc-wa-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.cc-wa-chat { padding: 1.25rem 1rem 1.5rem; min-height: 190px; background-color: #efeae2; background-image: radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px); background-size: 14px 14px; }
.cc-bubble { position: relative; max-width: 88%; background: #fff; border-radius: 0 10px 10px 10px; padding: .55rem .7rem 1.1rem; font-size: .88rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.cc-bubble::before { content: ''; position: absolute; left: -7px; top: 0; border-width: 0 8px 8px 0; border-style: solid; border-color: transparent #fff transparent transparent; }
.cc-bubble time { position: absolute; right: .55rem; bottom: .3rem; font-size: .66rem; color: #94a3b8; }
.cc-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .65rem; }
.cc-token { border: 1px dashed rgba(18,140,126,.5); background: rgba(18,140,126,.06); color: var(--brand-dark); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; padding: .18rem .55rem; border-radius: 8px; }
.cc-token:hover { background: rgba(18,140,126,.14); }

/* password policy */
.cc-range { padding-bottom: 1rem; margin-bottom: .25rem; border-bottom: 1px solid #eef2f6; }
.cc-range strong { font-size: .93rem; font-weight: 600; }
.cc-range-value { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; }
.cc-range .form-range { --fill: 10%; }
.cc-range .form-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--brand) var(--fill), #e2e8f0 var(--fill)); }
.cc-range .form-range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; background: #fff; border: 3px solid var(--brand); box-shadow: 0 2px 6px rgba(18,140,126,.4); }
.cc-range .form-range::-moz-range-track { height: 6px; border-radius: 6px; background: #e2e8f0; }
.cc-range .form-range::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--brand); }
.cc-range .form-range::-moz-range-thumb { width: 16px; height: 16px; background: #fff; border: 3px solid var(--brand); }
.cc-strength { background: linear-gradient(180deg, #fff, #f8fafc); }
.cc-gauge { height: 10px; border-radius: 10px; background: #e2e8f0; overflow: hidden; }
.cc-gauge-fill { height: 100%; border-radius: 10px; transition: width .35s ease, background .35s; }
.cc-gauge-fill.lv1 { background: linear-gradient(90deg, #f87171, #ef4444); }
.cc-gauge-fill.lv2 { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.cc-gauge-fill.lv3 { background: linear-gradient(90deg, #a3e635, #65a30d); }
.cc-gauge-fill.lv4 { background: linear-gradient(90deg, #34d399, #059669); }
.cc-gauge-label { font-size: 1.35rem; font-weight: 800; margin: .65rem 0 .9rem; }
.cc-rule-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: .87rem; }
.cc-rule-list .bi { color: #16a34a; margin-right: .3rem; }

.cc-kv { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; font-size: .88rem; }
.cc-kv + .cc-kv { border-top: 1px solid #eef2f6; }
.cc-kv span { color: var(--cc-muted); }

/* save bar */
.cc-savebar {
    position: sticky; bottom: 1rem; z-index: 1010; margin: 1.5rem 0 0 auto; max-width: 560px;
    display: flex; align-items: center; gap: .5rem; padding: .55rem .55rem .55rem 1.1rem;
    background: rgba(15,23,42,.92); color: #e2e8f0; border-radius: 16px; backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px -12px rgba(15,23,42,.5); font-size: .88rem;
}
.cc-savebar .cc-state-dirty, .cc-savebar .cc-discard { display: none; }
.cc-savebar.dirty .cc-state-dirty, .cc-savebar.dirty .cc-discard { display: inline-flex; }
.cc-savebar.dirty .cc-state-clean { display: none; }
.cc-state-clean, .cc-state-dirty { align-items: center; gap: .55rem; margin-right: auto; }
.cc-state-clean { color: #94a3b8; }
.cc-pulse { width: 9px; height: 9px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 0 0 rgba(251,191,36,.6); animation: cc-pulse 1.6s infinite; }
@keyframes cc-pulse { 70% { box-shadow: 0 0 0 9px rgba(251,191,36,0); } 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); } }
.cc-discard { color: #cbd5e1; text-decoration: none; font-size: .88rem; }
.cc-discard:hover { color: #fff; }
.cc-btn-save { color: #fff; font-weight: 600; border: 0; border-radius: 11px; padding: .55rem 1.15rem; background: linear-gradient(135deg, var(--brand-light), var(--brand)); box-shadow: 0 6px 16px -6px rgba(37,211,102,.6); }
.cc-btn-save:hover { color: #fff; filter: brightness(1.06); }

@media (max-width: 1199.98px) {
    .cc-hero { grid-template-columns: 1fr; }
    .cc-sticky { position: static; }
}
@media (max-width: 991.98px) {
    .cc-body { grid-template-columns: 1fr; }
    .cc-nav { position: static; display: flex; overflow-x: auto; gap: .25rem; scrollbar-width: none; }
    .cc-nav-item { flex-shrink: 0; }
    .cc-nav-item + .cc-nav-item { margin-top: 0; }
    .cc-nav-text small, .cc-nav-item.active::before { display: none; }
    .cc-dot { margin-left: .2rem; }
}
@media (max-width: 767.98px) {
    .cc-hero { padding: 1.4rem 1.2rem; }
    .cc-stats { grid-template-columns: 1fr 1fr; }
    .cc-row { flex-wrap: wrap; }
    .cc-field { flex-wrap: wrap; }
    .cc-field .cc-seg { width: 100%; }
    .cc-field .cc-seg label { flex: 1; text-align: center; }
    .cc-select { max-width: none; width: 100%; }
}

/* ---------- mobile ---------- */
.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    body.sidebar-open .sidebar { transform: none; }
    body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1030; }
    .main { margin-left: 0; }
    .content { padding: 1rem; }
    .topbar { padding: .6rem 1rem; }
}

/* ---------- brand: uploaded logos ---------- */
.brand-logo-mark { width: 36px; height: 36px; object-fit: contain; border-radius: 10px; flex-shrink: 0; }
.brand-logo-full { display: block; height: 34px; max-width: 190px; object-fit: contain; object-position: left center; }
.brand-logo-mark.on-tile, .brand-logo-full.on-tile { padding: 4px 7px; border-radius: 9px; box-sizing: content-box; }
.brand .on-tile, .auth-aside .on-tile, .br-dark-side .on-tile { background: #fff; }
.auth-brand-mobile .on-tile, .br-light-card .on-tile, .pv-brand .on-tile, .bill-brand .on-tile { background: #0f172a; }
.auth-brand .brand-logo-full { height: 44px; max-width: 240px; }
.pv-brand { display: flex; align-items: center; gap: .4rem; }
.pv-brand .brand-logo-mark { width: 22px; height: 22px; border-radius: 7px; }
.pv-brand .brand-logo-full { height: 20px; max-width: 120px; }
.bill-brand { display: block; margin: .25rem 0 .35rem; }
.bill-brand .brand-logo-mark, .bill-brand .brand-icon { width: 34px; height: 34px; }
.bill-brand .brand-logo-full { height: 30px; }

/* control center: brand settings */
.br-ideas { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .6rem; }
.br-ideas > span { font-size: .78rem; font-weight: 600; color: var(--cc-muted); margin-right: .2rem; }
.br-ideas .bi { color: #f59e0b; }
.br-idea { border: 1px solid #e2e8f0; background: #fff; color: #334155; font-size: .8rem; padding: .3rem .7rem; border-radius: 999px; transition: all .15s; }
.br-idea:hover { border-color: var(--brand); color: var(--brand-dark); background: #f0fdf9; transform: translateY(-1px); }
.br-uploads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.br-upload { display: flex; flex-direction: column; gap: .6rem; }
.br-drop { position: relative; display: flex; align-items: center; justify-content: center; height: 132px; margin: 0; border-radius: 14px; border: 1.5px dashed #cbd5e1; cursor: pointer; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.br-drop:hover, .br-drop.over { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(18,140,126,.1); }
.br-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.br-drop.br-light { background-color: #fff; background-image: linear-gradient(45deg, #f1f5f9 25%, transparent 25%), linear-gradient(-45deg, #f1f5f9 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f1f5f9 75%), linear-gradient(-45deg, transparent 75%, #f1f5f9 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.br-drop.br-dark { background: radial-gradient(circle at 30% 20%, rgba(37,211,102,.18), transparent 60%), #0f1d2b; border-color: #334155; }
.br-drop.br-tab { background: linear-gradient(180deg, #e2e8f0, #f1f5f9); }
.br-drop-preview { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 1.1rem; pointer-events: none; }
.br-drop-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.br-tab .br-drop-preview img { width: 56px; height: 56px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px -8px rgba(16,24,40,.4); }
.br-drop-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; pointer-events: none; color: #64748b; text-align: center; padding: .5rem; }
.br-drop-empty .bi { font-size: 1.5rem; color: var(--brand); }
.br-drop-empty strong { font-size: .84rem; color: #334155; }
.br-drop-empty small { font-size: .74rem; }
.br-dark .br-drop-empty, .br-dark .br-drop-empty strong { color: #cbd5e1; }
.br-dark .br-drop-empty .bi { color: #4ade80; }
.br-drop-change { position: absolute; right: .5rem; bottom: .5rem; font-size: .72rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; background: rgba(15,23,42,.75); color: #fff; opacity: 0; transition: opacity .2s; pointer-events: none; }
.br-drop:hover .br-drop-change { opacity: 1; }
.br-drop-empty:not([hidden]) ~ .br-drop-change { display: none; }
.br-upload-meta strong { display: block; font-size: .9rem; }
.br-upload-meta small { display: block; color: var(--cc-muted); font-size: .78rem; line-height: 1.4; }
.br-remove { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; font-size: .78rem; color: #dc2626; cursor: pointer; }
.br-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid #eef2f6; }
.br-preview { position: relative; border-radius: 16px; padding: 2.1rem 1rem 1rem; background: var(--cc-soft); border: 1px solid var(--cc-line); }
.br-preview-tag { position: absolute; top: .6rem; left: .75rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--cc-muted); }
.br-brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; min-height: 36px; }
.br-brand .brand-icon { width: 32px; height: 32px; border-radius: 9px; font-size: 1rem; }
.br-brand .brand-logo-mark { width: 32px; height: 32px; }
.br-brand .brand-logo-full { height: 30px; max-width: 170px; }
.br-light-card { background: #fff; border-radius: 12px; padding: 1rem; box-shadow: 0 12px 26px -16px rgba(16,24,40,.35); color: #0f172a; }
.br-title { font-weight: 800; margin: .7rem 0 .5rem; }
.br-line { height: 9px; border-radius: 5px; background: #eef2f6; margin-bottom: .4rem; }
.br-line.short { width: 60%; }
.br-btn { height: 22px; border-radius: 7px; background: var(--brand); margin-top: .6rem; }
.br-dark-side { background: #0f1d2b; border-radius: 12px; padding: 1rem; color: #fff; min-height: 170px; display: flex; flex-direction: column; }
.br-nav { display: grid; gap: .35rem; margin: .9rem 0; }
.br-nav i { height: 9px; border-radius: 5px; background: rgba(255,255,255,.1); }
.br-nav i.on { background: var(--brand); width: 80%; }
.br-tagline { margin-top: auto; font-size: .74rem; color: #94a3b8; line-height: 1.4; }
.br-browser { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 12px 26px -16px rgba(16,24,40,.35); }
.br-tab { display: flex; align-items: center; gap: .45rem; padding: .5rem .7rem; background: #e2e8f0; font-size: .74rem; color: #334155; }
.br-tab img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.br-tab span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-search { padding: .8rem .85rem .9rem; font-family: arial, sans-serif; }
.br-search-site { display: flex; align-items: center; gap: .5rem; }
.br-search-site img { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #f1f3f4; object-fit: contain; }
.br-search-site strong { display: block; font-size: .74rem; color: #202124; font-weight: 400; }
.br-search-site small { display: block; font-size: .68rem; color: #4d5156; }
.br-search-title { color: #1a0dab; font-size: .95rem; margin: .35rem 0 .15rem; line-height: 1.3; }
.br-search-desc { color: #4d5156; font-size: .74rem; line-height: 1.45; }
@media (max-width: 1199.98px) {
    .br-uploads, .br-previews { grid-template-columns: 1fr; }
}

/* ---------- notifications: settings ---------- */
.cc-toggle.sm { width: 38px; height: 22px; }
.cc-toggle.sm::before { width: 16px; height: 16px; }
.cc-toggle.sm:checked::before { transform: translateX(16px); }
.nt-presets { display: flex; flex-wrap: wrap; gap: .45rem; }
.nt-preset { border: 1px solid #e2e8f0; background: #fff; color: #334155; font-size: .84rem; font-weight: 600; padding: .45rem .85rem; border-radius: 11px; transition: all .15s; }
.nt-preset:hover { border-color: var(--brand); color: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 6px 14px -10px rgba(18,140,126,.6); }
.nt-preset.active { background: #e7f6f3; border-color: var(--brand); color: var(--brand-dark); }
.nt-hint { margin-top: .8rem; padding: .7rem .9rem; border-radius: 12px; background: #eff6ff; color: #1e3a8a; font-size: .85rem; }
.nt-inbox { border-radius: 18px; overflow: hidden; border: 1px solid var(--cc-line); background: #fff; box-shadow: 0 18px 40px -22px rgba(16,24,40,.4); }
.nt-inbox-head { padding: .65rem 1rem; font-size: .8rem; font-weight: 700; color: #475569; background: #f8fafc; border-bottom: 1px solid #eef2f6; }
.nt-inbox-row { display: flex; gap: .8rem; padding: .95rem 1rem; background: #f0fdf9; border-left: 3px solid var(--brand); }
.nt-inbox-row > div { flex: 1; min-width: 0; }
.nt-inbox-row small { color: #64748b; font-size: .74rem; }
.nt-inbox-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--brand-light), var(--brand)); }
.nt-inbox-subject { font-size: .88rem; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-inbox-snippet { font-size: .8rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-days { max-width: 140px; }

.nt-events { padding: 0; overflow: hidden; }
.nt-events-head { display: flex; align-items: center; gap: .5rem; padding: 1.1rem 1.4rem .9rem; border-bottom: 1px solid #eef2f6; }
.nt-events-head .cc-card-title { margin-right: auto; }
.nt-col { width: 84px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.nt-events-head .nt-col .bi-whatsapp, .np-table-head .bi-whatsapp { color: #25d366; font-size: .95rem; }
.nt-events-head .nt-col .bi-envelope, .np-table-head .bi-envelope { color: #2563eb; font-size: .95rem; }
.nt-col-edit { width: 112px; flex-shrink: 0; }
.nt-group { padding: .6rem 1.4rem .35rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #94a3b8; background: #fafbfc; border-top: 1px solid #f1f5f9; }
.nt-event { border-top: 1px solid #f1f5f9; }
.nt-event.open { background: linear-gradient(180deg, #f8fffd, #fff); }
.nt-row { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.4rem; }
.nt-icon { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; color: var(--brand); background: #e7f6f3; }
.nt-icon.admin { color: #7c3aed; background: #ede9fe; }
.nt-what { flex: 1; min-width: 0; margin-left: .3rem; }
.nt-what strong { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-size: .92rem; }
.nt-what small { display: block; color: var(--cc-muted, #64748b); font-size: .8rem; }
.nt-aud { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .12rem .45rem; border-radius: 6px; background: #e0f2fe; color: #0369a1; }
.nt-aud.admin { background: #ede9fe; color: #6d28d9; }
.nt-aud.lock { background: #f1f5f9; color: #475569; }
.nt-editor { padding: .4rem 1.4rem 1.3rem 4.35rem; }
.nt-tabs { max-width: 420px; margin-bottom: .75rem; }
.nt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .75rem; }
.nt-chips > span { font-size: .76rem; color: var(--cc-muted); font-weight: 600; }
.nt-text { font-size: .9rem; }
.nt-editor-actions { display: flex; align-items: center; margin-top: .55rem; }
.nt-wa .cc-wa-chat { min-height: 150px; }
.nt-status { display: inline-block; font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; background: #f1f5f9; color: #475569; }
.nt-status.sent { background: #dcfce7; color: #15803d; }
.nt-status.failed { background: #fee2e2; color: #b91c1c; }
.nt-status.retry, .nt-status.queued, .nt-status.sending { background: #fef3c7; color: #b45309; }
.nt-log td { border-color: #f1f5f9; }

/* email preview (mirrors email_layout()) */
.em-preview { border-radius: 16px; background: #f1f5f9; padding: 1.1rem; border: 1px solid var(--cc-line); font-family: Arial, Helvetica, sans-serif; }
.em-brand { display: flex; align-items: center; gap: .55rem; margin-bottom: .75rem; }
.em-logo { max-height: 30px; max-width: 160px; }
.em-mark { width: 28px; height: 28px; border-radius: 8px; background: #128c7e; color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.em-name { font-weight: 700; color: #0f172a; }
.em-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(16,24,40,.08); }
.em-bar { height: 4px; background: linear-gradient(90deg, #25d366, #128c7e); }
.em-body { padding: 1.1rem 1.2rem 1.2rem; }
.em-body h4 { font-size: 1.02rem; font-weight: 800; color: #0f172a; margin: 0 0 .7rem; }
.em-body p { font-size: .84rem; line-height: 1.6; color: #334155; margin: 0 0 .7rem; }
.em-body a { color: #128c7e; text-decoration: underline; }
.em-btn { display: inline-block; margin-top: .2rem; padding: .55rem 1.05rem; border-radius: 10px; background: #128c7e; color: #fff; font-weight: 700; font-size: .82rem; }
.em-foot { text-align: center; font-size: .72rem; color: #94a3b8; margin-top: .75rem; }

/* ---------- notifications: user page ---------- */
.np { max-width: 920px; }
.np-hero { display: flex; align-items: center; gap: 1.1rem; padding: 1.5rem 1.75rem; border-radius: 22px; color: #fff; margin-bottom: 1.25rem;
    background: radial-gradient(500px 220px at 0% 0%, rgba(37,211,102,.32), transparent 60%), radial-gradient(500px 260px at 100% 100%, rgba(99,102,241,.35), transparent 60%), linear-gradient(135deg, #0a1322, #10223a 60%, #0c2f2b);
    box-shadow: 0 24px 48px -26px rgba(10,19,34,.6); }
.np-hero-icon { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); flex-shrink: 0; }
.np-hero h2 { font-size: 1.45rem; font-weight: 800; margin: 0 0 .25rem; letter-spacing: -.015em; }
.np-hero p { margin: 0; color: rgba(255,255,255,.7); }
.np-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.np-channel { display: flex; align-items: center; gap: .9rem; margin: 0; padding: 1.1rem 1.2rem; background: #fff; border: 1.5px solid #e6ebf1; border-radius: 18px; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.np-channel:has(.cc-toggle:checked) { border-color: rgba(18,140,126,.5); box-shadow: 0 0 0 4px rgba(18,140,126,.07); }
.np-channel.off { opacity: .6; cursor: default; }
.np-channel-icon { width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.np-channel-icon.wa { background: #dcfce7; color: #16a34a; }
.np-channel-icon.mail { background: #e0ecff; color: #2563eb; }
.np-channel-text { flex: 1; min-width: 0; }
.np-channel-text > strong { display: block; font-size: 1rem; }
.np-channel-text small { color: #64748b; font-size: .84rem; }
.np-card { background: #fff; border: 1px solid #e6ebf1; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.np-table-head { display: flex; align-items: center; gap: .5rem; padding: 1rem 1.3rem; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #475569; border-bottom: 1px solid #eef2f6; }
.np-table-head > span:first-child { margin-right: auto; }
.np-col { width: 70px; flex-shrink: 0; display: flex; justify-content: center; }
.np-group { padding: .55rem 1.3rem .3rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #94a3b8; background: #fafbfc; border-top: 1px solid #f1f5f9; }
.np-row { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.3rem; border-top: 1px solid #f1f5f9; }
.np-icon { width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--brand); background: #e7f6f3; }
.np-what { flex: 1; min-width: 0; margin-left: .3rem; }
.np-what strong { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .92rem; }
.np-what small { display: block; color: #64748b; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-na { color: #cbd5e1; }
.np-note { margin-top: 1rem; padding: .8rem 1rem; border-radius: 14px; background: #f5f3ff; color: #5b21b6; font-size: .88rem; }
.np-save { display: flex; justify-content: flex-end; margin-top: 1rem; }
.np-save .btn { border-radius: 12px; font-weight: 700; }
.np-recent { display: flex; align-items: center; gap: .8rem; padding: .75rem 1.3rem; border-top: 1px solid #f1f5f9; }
.np-recent-icon { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.np-recent-icon.wa { background: #dcfce7; color: #16a34a; }
.np-recent-icon.mail { background: #e0ecff; color: #2563eb; }
.np-recent-meta { font-size: .74rem; color: #94a3b8; text-align: right; white-space: nowrap; }
@media (max-width: 767.98px) {
    .np-channels { grid-template-columns: 1fr; }
    .nt-row { flex-wrap: wrap; }
    .nt-editor { padding-left: 1.4rem; }
    .nt-col { width: 64px; }
}

/* control center: payments */
.tone-razorpay { background: linear-gradient(135deg, #e0e7ff, #dbeafe); color: #2b55d9; }
.tone-upi { background: linear-gradient(135deg, #dcfce7, #ccfbf1); color: #0f9d58; }
.cc-paystats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--cc-line); border: 1px solid var(--cc-line); border-radius: 16px; overflow: hidden; margin-bottom: 1rem; }
.cc-paystats > * { background: #fff; padding: .9rem 1.2rem; text-decoration: none; color: var(--cc-ink); }
.cc-paystats a:hover { background: var(--cc-soft); color: var(--cc-ink); }
.cc-paystats span { display: block; font-size: .76rem; color: var(--cc-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.cc-paystats strong { font-size: 1.35rem; font-weight: 800; }
.cc-paystats strong small { font-size: .85rem; color: var(--cc-muted); }
.cc-gateway-head { display: flex; align-items: center; gap: .9rem; }
.cc-gateway-head > div { flex: 1; min-width: 0; }
.cc-gateway-head strong { display: block; font-size: 1.05rem; font-weight: 700; }
.cc-gateway-head small { color: var(--cc-muted); font-size: .82rem; }
.cc-gateway-status { display: flex; gap: .4rem; flex-wrap: wrap; margin: .9rem 0 1.1rem; padding-bottom: 1rem; border-bottom: 1px dashed #e5eaf0; }
.cc-color { display: flex; align-items: center; gap: .6rem; padding: .3rem .4rem; border: 1px solid #dfe5ec; border-radius: 10px; }
.cc-color input { width: 38px; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; }
.cc-color code { color: var(--cc-ink); }
.cc-details { margin-top: 1.1rem; border-top: 1px solid #eef2f6; padding-top: .9rem; }
.cc-details summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--brand-dark); list-style: none; }
.cc-details summary::-webkit-details-marker { display: none; }
.cc-details summary .bi { margin-right: .3rem; }
.cc-upi-preview { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; padding: 1rem; border-radius: 16px; background: radial-gradient(circle at 50% 0%, rgba(37,211,102,.12), transparent 60%), var(--cc-soft); border: 1px solid var(--cc-line); }
.cc-upi-qr { padding: 8px; background: #fff; border-radius: 12px; box-shadow: 0 6px 18px -8px rgba(16,24,40,.25); margin-bottom: .5rem; min-height: 148px; min-width: 148px; }
.cc-upi-qr img, .cc-upi-qr canvas { display: block; }
.cc-upi-preview strong { font-size: .9rem; }
.cc-upi-preview small { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--cc-muted); font-size: .76rem; word-break: break-all; }
.cc-upi-amount { margin-top: .35rem; font-size: .74rem; font-weight: 700; color: #15803d; background: #dcfce7; padding: .15rem .55rem; border-radius: 999px; }
.cc-tax-preview { display: flex; flex-direction: column; padding: .45rem .85rem; border-radius: 10px; background: var(--cc-soft); border: 1px dashed #d5dde6; }
.cc-tax-preview span { font-size: .76rem; color: var(--cc-muted); }
.cc-tax-preview strong { font-size: 1.05rem; }

/* ---------- billing (checkout, UPI, receipt) ---------- */
.bill { max-width: 1080px; margin: 0 auto; }
.bill-back { display: inline-flex; align-items: center; gap: .35rem; color: #64748b; text-decoration: none; font-size: .9rem; font-weight: 500; }
.bill-back:hover { color: var(--brand); }
.bill-grid { display: grid; grid-template-columns: 1fr 400px; gap: 1.5rem; margin-top: 1rem; align-items: start; }
.bill-h { font-size: 1.3rem; font-weight: 800; letter-spacing: -.015em; margin-bottom: 1rem; }
.bill-eyebrow { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--brand); }
.bill-methods { display: grid; gap: .8rem; }
.bill-method { position: relative; display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.2rem; margin: 0; cursor: pointer; background: #fff; border: 1.5px solid #e6ebf1; border-radius: 18px; transition: border-color .2s, box-shadow .2s; }
.bill-method:hover { border-color: #cbd5e1; }
.bill-method:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(18,140,126,.1); }
.bill-method input { position: absolute; opacity: 0; pointer-events: none; }
.bill-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cbd5e1; flex-shrink: 0; margin-top: 12px; transition: all .15s; }
.bill-method input:checked + .bill-radio { border-color: var(--brand); border-width: 6px; }
.bill-method-icon { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.bill-method-body { flex: 1; min-width: 0; }
.bill-method-body strong { display: block; font-size: 1rem; }
.bill-method-body small { color: #64748b; font-size: .85rem; }
.bill-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.bill-chips span { font-size: .72rem; font-weight: 600; color: #475569; background: #f1f5f9; padding: .18rem .55rem; border-radius: 6px; }
.bill-test { position: absolute; top: .9rem; right: 1rem; }
.bill-pay { margin-top: 1.25rem; }
.bill-pay .btn-lg { border-radius: 14px; padding: .85rem; font-weight: 700; font-size: 1.05rem; box-shadow: 0 10px 24px -10px rgba(18,140,126,.7); }
.bill-error { margin-top: .75rem; padding: .65rem .9rem; border-radius: 12px; background: #fef2f2; color: #b91c1c; font-size: .88rem; }
.bill-secure { text-align: center; color: #64748b; font-size: .82rem; margin: .85rem 0 0; }
.bill-summary { position: sticky; top: 78px; background: #fff; border: 1px solid #e6ebf1; border-radius: 20px; padding: 1.4rem; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 20px 40px -24px rgba(16,24,40,.25); }
.bill-summary-head h3 { font-size: 1.35rem; font-weight: 800; margin: .3rem 0 .25rem; }
.bill-summary-head p { color: #64748b; font-size: .88rem; margin: 0 0 1rem; }
.bill-features { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; font-size: .85rem; }
.bill-features .bi { color: var(--brand); margin-right: .25rem; }
.bill-lines { border-top: 1px dashed #dfe5ec; padding-top: .8rem; display: grid; gap: .45rem; font-size: .92rem; }
.bill-lines > div { display: flex; justify-content: space-between; color: #475569; }
.bill-lines > .bill-total { border-top: 1px solid #eef2f6; padding-top: .7rem; margin-top: .2rem; color: #0f172a; font-weight: 800; font-size: 1.2rem; }
.bill-note { margin-top: 1rem; padding: .75rem .9rem; border-radius: 12px; background: #f0fdf9; color: #115e59; font-size: .84rem; line-height: 1.5; }
.bill-note .bi { margin-right: .2rem; }

.bill-upi-card { background: #fff; border: 1px solid #e6ebf1; border-radius: 22px; padding: 1.75rem; text-align: center; box-shadow: 0 20px 40px -24px rgba(16,24,40,.3); background-image: radial-gradient(circle at 50% -10%, rgba(37,211,102,.14), transparent 55%); }
.bill-upi-amount { font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; margin-top: .3rem; }
.bill-upi-for { color: #64748b; font-size: .88rem; }
.bill-qr { display: inline-block; padding: 14px; margin: 1.25rem 0 .9rem; background: #fff; border-radius: 18px; border: 1px solid #e6ebf1; box-shadow: 0 10px 30px -14px rgba(16,24,40,.35); min-width: 248px; min-height: 248px; }
.bill-qr img, .bill-qr canvas { display: block; }
.bill-upi-apps { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-bottom: 1rem; }
.bill-upi-apps span { font-size: .74rem; font-weight: 600; color: #475569; background: #f1f5f9; padding: .2rem .6rem; border-radius: 999px; }
.bill-upi-open { display: none; border-radius: 14px; font-weight: 700; }
.bill-vpa { display: flex; align-items: center; gap: .75rem; text-align: left; padding: .8rem 1rem; border-radius: 14px; background: #f8fafc; border: 1px solid #eef2f6; margin-top: .25rem; }
.bill-vpa > div { flex: 1; min-width: 0; }
.bill-vpa small { display: block; font-size: .72rem; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }
.bill-vpa strong { display: block; }
.bill-vpa code { color: #0f172a; word-break: break-all; }
.bill-steps { padding-left: 1.1rem; font-size: .87rem; color: #334155; display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.bill-summary .form-label { font-weight: 600; font-size: .86rem; }

.bill-receipt { max-width: 640px; }
.bill-receipt-card { background: #fff; border: 1px solid #e6ebf1; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 40px -24px rgba(16,24,40,.3); }
.bill-status { text-align: center; padding: 2rem 1.5rem 1.6rem; }
.bill-status h2 { font-size: 1.4rem; font-weight: 800; margin: .9rem 0 .3rem; }
.bill-status p { color: #64748b; margin: 0 auto; max-width: 42ch; font-size: .92rem; }
.bill-status-icon { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.9rem; color: #fff; }
.bill-status-amount { font-size: 2rem; font-weight: 800; margin-top: .8rem; letter-spacing: -.02em; }
.bill-status.tone-success { background: linear-gradient(180deg, #ecfdf5, #fff); }
.bill-status.tone-success .bill-status-icon { background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 0 0 8px rgba(16,185,129,.14); }
.bill-status.tone-warning { background: linear-gradient(180deg, #fffbeb, #fff); }
.bill-status.tone-warning .bill-status-icon { background: linear-gradient(135deg, #fbbf24, #d97706); box-shadow: 0 0 0 8px rgba(245,158,11,.14); }
.bill-status.tone-danger { background: linear-gradient(180deg, #fef2f2, #fff); }
.bill-status.tone-danger .bill-status-icon { background: linear-gradient(135deg, #f87171, #dc2626); box-shadow: 0 0 0 8px rgba(239,68,68,.14); }
.bill-status.tone-muted .bill-status-icon { background: #94a3b8; }
.bill-receipt-body { padding: 0 1.6rem 1.6rem; }
.bill-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid #eef2f6; border-bottom: 1px solid #eef2f6; }
.bill-parties small { display: block; font-size: .72rem; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }
.bill-parties strong, .bill-parties span { display: block; }
.bill-parties span { font-size: .85rem; color: #64748b; }
.bill-dl { margin: 1rem 0; display: grid; gap: .5rem; font-size: .9rem; }
.bill-dl > div { display: flex; justify-content: space-between; gap: 1rem; }
.bill-dl dt { font-weight: 500; color: #64748b; }
.bill-dl dd { margin: 0; text-align: right; word-break: break-all; }

@media (max-width: 991.98px) {
    .bill-grid { grid-template-columns: 1fr; }
    .bill-summary { position: static; }
    .bill-upi-open { display: inline-flex; justify-content: center; align-items: center; gap: .4rem; margin-bottom: .75rem; }
    .cc-paystats { grid-template-columns: 1fr; }
}
/* ---------- contact book ---------- */
.cb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.cb-head-main { display: flex; align-items: center; gap: .9rem; margin-right: auto; }
.cb-head-icon { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; background: linear-gradient(135deg, var(--brand-light), var(--brand)); box-shadow: 0 10px 22px -10px rgba(18,140,126,.8); }
.cb-head h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.015em; margin: 0; }
.cb-head p { margin: 0; color: #64748b; font-size: .9rem; }
.cb-head-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.cb-head-actions .btn { border-radius: 11px; font-weight: 600; }
.cb-head-actions .btn-light { background: #fff; border: 1px solid #e2e8f0; }
.cb-menu { min-width: 290px; padding: .4rem; border-radius: 14px; border-color: #e6ebf1; box-shadow: 0 18px 40px -16px rgba(16,24,40,.3); }
.cb-menu .dropdown-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .7rem; border-radius: 10px; white-space: normal; }
.cb-menu .dropdown-item > .bi, .cb-menu .dropdown-item > svg { width: 20px; font-size: 1.1rem; color: var(--brand); flex-shrink: 0; }
.cb-menu strong { display: block; font-size: .9rem; }
.cb-menu small { display: block; color: #64748b; font-size: .78rem; }
.cb-menu .dropdown-item:active { background: #f0fdf9; color: inherit; }

.cb-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.25rem; align-items: start; }
.cb-side { position: sticky; top: 78px; background: #fff; border: 1px solid #e6ebf1; border-radius: 18px; padding: .6rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.cb-side-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; padding: .9rem .7rem .35rem; }
.cb-nav { display: grid; gap: 1px; }
.cb-nav a { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 10px; color: #334155; text-decoration: none; font-size: .9rem; }
.cb-nav a:hover { background: #f8fafc; color: #0f172a; }
.cb-nav a.active { background: linear-gradient(90deg, rgba(18,140,126,.12), rgba(18,140,126,.03)); color: var(--brand-dark); font-weight: 600; }
.cb-nav a .bi { color: #94a3b8; }
.cb-nav a.active .bi { color: var(--brand); }
.cb-nav em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cb-nav span { margin-left: auto; font-size: .75rem; font-weight: 600; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: .05rem .5rem; }
.cb-side-empty { font-size: .82rem; color: #94a3b8; padding: .3rem .7rem; }
.cb-newgroup { display: flex; gap: .35rem; padding: .5rem .5rem .2rem; }
.cb-newgroup .form-control { border-radius: 9px; }
.cb-usage { margin: .8rem .3rem .2rem; padding: .8rem; border-radius: 12px; background: #f8fafc; }
.cb-usage small { color: #64748b; font-size: .78rem; }

.cb-main { min-width: 0; }
.cb-card { background: #fff; border: 1px solid #e6ebf1; border-radius: 18px; box-shadow: 0 1px 2px rgba(16,24,40,.04); overflow: hidden; }
.cb-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1rem 1.1rem; border-bottom: 1px solid #eef2f6; }
.cb-toolbar .form-control { border-radius: 11px; }
.cb-table thead th { background: #fafbfc; }
.cb-table td { border-color: #f1f5f9; }
.cb-table tbody tr:hover { background: #f8fafc; }
.cb-table tbody tr:has([data-cb-pick]:checked) { background: #f0fdf9; }
.cb-col-check { width: 44px; }
.cb-person { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.cb-person > div { min-width: 0; display: flex; flex-direction: column; }
.cb-person strong { font-weight: 600; }
.cb-person small { color: #64748b; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.cb-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; color: #fff; background: var(--c, var(--brand)); }
.cb-avatar.lg { width: 46px; height: 46px; font-size: 1rem; }
.cb-phone { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88rem; white-space: nowrap; }
.cb-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.cb-tag { font-size: .74rem; font-weight: 600; color: var(--brand-dark); background: #e7f6f3; padding: .15rem .55rem; border-radius: 999px; text-decoration: none; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-tag:hover { background: #d1efe9; color: var(--brand-dark); }
.cb-tag.more { background: #f1f5f9; color: #64748b; }
.cb-source { font-size: .8rem; color: #64748b; white-space: nowrap; }
.cb-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1.1rem; border-top: 1px solid #eef2f6; }
.cb-foot .pagination, .cb-foot nav { margin: 0; }
.cb-empty { text-align: center; padding: 3.5rem 1rem; }
.cb-empty > .bi { font-size: 2.6rem; color: #cbd5e1; }
.cb-empty h3 { font-size: 1.15rem; font-weight: 700; margin: .6rem 0 .3rem; }
.cb-empty p { color: #64748b; margin-bottom: 1.2rem; }

.cb-group { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; padding: .75rem 1rem; background: #fff; border: 1px solid #e6ebf1; border-radius: 16px; }
.cb-group-name { display: flex; align-items: center; gap: .5rem; margin-right: auto; }
.cb-group-name .bi { color: var(--brand); font-size: 1.1rem; }
.cb-group-name input { border: 1px solid transparent; border-radius: 9px; padding: .3rem .5rem; font-weight: 700; font-size: 1.05rem; min-width: 180px; }
.cb-group-name input:hover, .cb-group-name input:focus { border-color: #dfe5ec; outline: none; }
.cb-group-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.cb-group-actions form { display: inline; }

.cb-bulk {
    position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 1030;
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .55rem .6rem .55rem 1.1rem;
    background: rgba(15,23,42,.94); color: #e2e8f0; border-radius: 16px; backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px -12px rgba(15,23,42,.55); width: max-content; max-width: calc(100vw - 2rem);
}
@media (min-width: 992px) { .cb-bulk { left: calc(50% + var(--sidebar-w) / 2); } }
.cb-bulk-count { margin-right: .5rem; font-size: .9rem; }
.cb-bulk-count strong { font-size: 1.1rem; color: #fff; }
.cb-bulk-count .btn-link { color: #6ee7b7; text-decoration: none; }
.cb-bulk .btn-light { background: rgba(255,255,255,.1); border: 0; color: #f1f5f9; }
.cb-bulk .btn-light:hover { background: rgba(255,255,255,.18); color: #fff; }
.cb-bulk .btn-light.text-danger { color: #fca5a5 !important; }
.cb-bulk-send { color: #fff; font-weight: 600; background: linear-gradient(135deg, var(--brand-light), var(--brand)); border: 0; }
.cb-bulk-send:hover { color: #fff; filter: brightness(1.07); }
.cb-bulk-close { color: #94a3b8; }
.cb-group-menu { min-width: 240px; border-radius: 14px; }

.cb-modal { border: 0; border-radius: 20px; box-shadow: 0 30px 60px -20px rgba(15,23,42,.45); }
.cb-modal .modal-header { border-bottom: 1px solid #eef2f6; padding: 1.1rem 1.4rem; }
.cb-modal .modal-body { padding: 1.25rem 1.4rem; }
.cb-modal .modal-footer { border-top: 1px solid #eef2f6; }
.cb-modal-title { display: flex; align-items: center; gap: .85rem; }
.cb-modal-title h5 { font-weight: 800; margin: 0; }
.cb-modal .form-label { font-weight: 600; font-size: .86rem; }
.cb-modal .form-control, .cb-modal .form-select { border-radius: 10px; }
.cb-group-picks { display: flex; flex-wrap: wrap; gap: .4rem; }
.cb-group-picks label { margin: 0; cursor: pointer; }
.cb-group-picks input { position: absolute; opacity: 0; pointer-events: none; }
.cb-group-picks span { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .75rem; border-radius: 999px; border: 1px solid #dfe5ec; font-size: .85rem; transition: all .15s; }
.cb-group-picks input:checked + span { background: #e7f6f3; border-color: var(--brand); color: var(--brand-dark); font-weight: 600; }
.cb-group-picks input:checked + span::before { content: "\f26b"; font-family: bootstrap-icons; }
.cb-group-picks input:focus-visible + span { outline: 2px solid rgba(18,140,126,.4); }

.cb-recipients { display: grid; gap: .45rem; margin-top: .6rem; max-height: 260px; overflow-y: auto; }
.cb-recipients > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
.cb-recipients span { font-family: ui-monospace, Menlo, Consolas, monospace; color: #64748b; font-size: .82rem; }

/* contact book: Google import and several numbers per contact */
.cb-head-actions .cb-google-btn, .cb-google-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: #fff; border: 1px solid #dadce0; color: #1f2937; font-weight: 600; }
.cb-google-btn:hover { background: #f8fafc; border-color: #c6cbd1; color: #111827; box-shadow: 0 2px 8px rgba(16,24,40,.08); }
.cb-number { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.cb-number.more { font-size: .8rem; color: #64748b; }
.cb-number em { font-style: normal; font-family: system-ui, sans-serif; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #64748b; background: #f1f5f9; padding: .05rem .4rem; border-radius: 5px; }
.cb-phones { display: grid; gap: .45rem; margin-bottom: .5rem; }
.cb-phone-row { display: grid; grid-template-columns: minmax(0, 1fr) 136px auto auto; gap: .4rem; align-items: center; }
.cb-phone-row .btn-light { border: 1px solid #e2e8f0; background: #fff; color: #94a3b8; }
.cb-phone-row .btn-light:hover { color: #dc2626; }
.cb-primary { margin: 0; cursor: pointer; }
.cb-primary input { position: absolute; opacity: 0; pointer-events: none; }
.cb-primary span { display: inline-flex; align-items: center; gap: .3rem; padding: .42rem .65rem; border: 1px solid #dfe5ec; border-radius: 10px; font-size: .8rem; font-weight: 600; color: #94a3b8; white-space: nowrap; }
.cb-primary span::before { content: "\f28a"; font-family: bootstrap-icons; }
.cb-primary input:checked + span { color: var(--brand-dark); border-color: var(--brand); background: #e7f6f3; }
.cb-primary input:checked + span::before { content: "\f586"; }
.cb-primary input:focus-visible + span { outline: 2px solid rgba(18,140,126,.4); }
.cb-add-phone { border: 1px dashed #cbd5e1; background: #fff; }
.cb-google-logo { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e6ebf1; box-shadow: 0 6px 16px -10px rgba(16,24,40,.35); flex-shrink: 0; }
.cb-gopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cb-gopt { display: flex; flex-direction: column; padding: 1.15rem; border: 1px solid #e6ebf1; border-radius: 16px; background: linear-gradient(180deg, #fff, #fafcfd); }
.cb-gopt-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; }
.cb-gopt-head strong { display: block; font-size: .98rem; }
.cb-gopt-head small { color: #64748b; font-size: .78rem; }
.cb-gopt-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; color: #2563eb; background: #e0ecff; flex-shrink: 0; }
.cb-gopt-icon.green { color: #15803d; background: #dcfce7; }
.cb-gopt > p { font-size: .87rem; color: #475569; }
.cb-gopt .btn { margin-top: auto; }
.cb-gopt-off { display: flex; gap: .6rem; padding: .85rem; border-radius: 12px; background: #f8fafc; border: 1px dashed #d5dde6; font-size: .86rem; color: #475569; }
.cb-gopt-off .bi { color: #94a3b8; font-size: 1.1rem; }
.cb-gsteps { padding-left: 1.15rem; margin: 0 0 .85rem; font-size: .86rem; color: #334155; display: grid; gap: .25rem; }
@media (max-width: 767.98px) {
    .cb-gopts { grid-template-columns: 1fr; }
    .cb-phone-row { grid-template-columns: minmax(0, 1fr) auto; }
}

/* shared pieces: tabs, WhatsApp account picker, notes */
.gc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: #f1f5f9; border-radius: 12px; }
.gc-tabs button { border: 0; background: none; padding: .55rem; border-radius: 9px; font-weight: 600; font-size: .9rem; color: #64748b; }
.gc-tabs button.active { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(16,24,40,.12); }
.gc-accounts { display: grid; gap: .4rem; }
.gc-account { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .55rem .75rem; border: 1px solid #e6ebf1; border-radius: 11px; cursor: pointer; font-size: .88rem; }
.gc-account:has(input:checked) { border-color: var(--brand); background: #f0fdf9; }
.gc-account input { accent-color: var(--brand); }
.gc-account .bi-whatsapp { color: #25d366; }
.gc-account small { color: #64748b; }
.gc-go { border-radius: 14px; font-weight: 700; box-shadow: 0 10px 24px -10px rgba(18,140,126,.7); }
.gc-note { font-size: .8rem; color: #64748b; text-align: center; margin: .7rem 0 0; }
.gc-locked { padding: 1rem; border-radius: 14px; background: #fffbeb; color: #78350f; font-size: .9rem; }

@media (max-width: 991.98px) {
    .cb-layout { grid-template-columns: 1fr; }
    .cb-side { position: static; }
}

/* ---------- developer hub (API & webhook guide) ---------- */
.dv { --dv-ink: #0f172a; --dv-muted: #64748b; --dv-line: #e6ebf1; color: var(--dv-ink); }
.dv-hero {
    position: relative; overflow: hidden; display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; align-items: center;
    padding: 2.25rem 2.25rem; border-radius: 24px; color: #fff; margin-bottom: 1.5rem;
    background:
        radial-gradient(700px 300px at 0% 0%, rgba(37,211,102,.32), transparent 60%),
        radial-gradient(600px 360px at 100% 100%, rgba(129,140,248,.4), transparent 60%),
        linear-gradient(135deg, #070d1a 0%, #0f1f38 55%, #101a3a 100%);
    box-shadow: 0 30px 60px -30px rgba(7,13,26,.7);
}
.dv-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 32px 32px; mask-image: radial-gradient(ellipse at 20% 30%, #000 10%, transparent 70%);
}
.dv-hero > * { position: relative; }
.dv-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #a5b4fc; background: rgba(165,180,252,.1); border: 1px solid rgba(165,180,252,.28); padding: .3rem .75rem; border-radius: 999px; }
.dv-hero h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; margin: 1rem 0 .7rem; }
.dv-hero p { color: rgba(255,255,255,.7); font-size: 1.02rem; max-width: 52ch; margin: 0 0 1.4rem; }
.dv-hero-cta { display: flex; flex-wrap: wrap; gap: .6rem; }
.dv-btn-glow { color: #fff; font-weight: 700; border: 0; border-radius: 12px; padding: .65rem 1.2rem; background: linear-gradient(135deg, #25d366, #128c7e); box-shadow: 0 10px 28px -8px rgba(37,211,102,.65); }
.dv-btn-glow:hover { color: #fff; filter: brightness(1.08); }
.dv-btn-ghost { color: #e2e8f0; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: .65rem 1.1rem; font-weight: 600; }
.dv-btn-ghost:hover { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); }
.dv-terminal { border-radius: 16px; background: rgba(2,6,23,.75); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); overflow: hidden; }
.dv-terminal-head { display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem; font: 600 .78rem/1 ui-monospace, Menlo, Consolas, monospace; color: #94a3b8; border-bottom: 1px solid rgba(255,255,255,.07); }
.dv-terminal pre { margin: 0; padding: 1rem 1.1rem 1.15rem; font: .84rem/1.65 ui-monospace, Menlo, Consolas, monospace; color: #e2e8f0; white-space: pre-wrap; }
.dv-terminal .k { color: #7dd3fc; } .dv-terminal .s { color: #86efac; } .dv-terminal .b { color: #fca5a5; } .dv-terminal .c { color: #a5b4fc; font-weight: 700; }
.dv-dots { display: inline-flex; gap: 5px; }
.dv-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; }
.dv-dots i:nth-child(2) { background: #f59e0b; }
.dv-dots i:nth-child(3) { background: #22c55e; }
.dv-status { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.dv-status span { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; }
.dv-status .on { background: rgba(74,222,128,.13); color: #bbf7d0; border: 1px solid rgba(74,222,128,.28); }
.dv-status .off { background: rgba(251,191,36,.12); color: #fde68a; border: 1px solid rgba(251,191,36,.28); }
.dv-alert { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem; border-radius: 14px; background: #fffbeb; color: #78350f; border: 1px solid #fde68a; margin-bottom: 1.25rem; }

.dv-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2rem; align-items: start; }
.dv-nav { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 1px; max-height: calc(100vh - 100px); overflow-y: auto; }
.dv-nav-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #94a3b8; padding: 1rem .75rem .35rem; }
.dv-nav-title:first-child { padding-top: 0; }
.dv-nav a { display: flex; align-items: center; gap: .6rem; padding: .45rem .75rem; border-radius: 10px; color: #475569; font-size: .9rem; text-decoration: none; border-left: 2px solid transparent; }
.dv-nav a:hover { background: #fff; color: var(--dv-ink); }
.dv-nav a.active { background: #fff; color: var(--brand-dark); font-weight: 600; border-left-color: var(--brand); box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.dv-nav a .bi { color: #94a3b8; }
.dv-nav a.active .bi { color: var(--brand); }

.dv-docs { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.dv-play-form, .dv-play-out { min-width: 0; }
.dv-section { min-width: 0; background: #fff; border: 1px solid var(--dv-line); border-radius: 20px; padding: 1.75rem 1.9rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); scroll-margin-top: 90px; }
.dv-kicker { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); margin-bottom: .35rem; }
.dv-section h3 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.015em; margin: 0 0 .6rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.dv-section > p { color: #475569; }
.dv-lead { font-size: 1.02rem; color: #334155 !important; max-width: 75ch; }
.dv-section code { color: #be185d; background: #fdf2f8; padding: .08rem .35rem; border-radius: 5px; font-size: .84em; }

.dv-verb { display: inline-flex; align-items: center; font: 700 .72rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; padding: .35rem .55rem; border-radius: 7px; color: #fff; }
.dv-verb.post { background: linear-gradient(135deg, #22c55e, #15803d); }
.dv-verb.get { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }

.dv-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.dv-step { position: relative; padding: 1.3rem 1.2rem 1.2rem; border: 1px solid var(--dv-line); border-radius: 16px; background: linear-gradient(180deg, #fff, #fafcfd); }
.dv-step-no { position: absolute; top: -12px; left: 1.1rem; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; color: #fff; background: linear-gradient(135deg, var(--brand-light), var(--brand)); box-shadow: 0 6px 14px -6px rgba(18,140,126,.8); }
.dv-step h4 { font-size: 1rem; font-weight: 700; margin: .35rem 0 .3rem; }
.dv-step > p { font-size: .87rem; color: var(--dv-muted); margin-bottom: .8rem; }
.dv-token { display: flex; align-items: center; gap: .35rem; padding: .35rem .35rem .35rem .7rem; border-radius: 11px; background: #0f172a; margin-bottom: .4rem; }
.dv-token code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none !important; color: #a7f3d0 !important; font-size: .8rem !important; padding: 0 !important; }
.dv-token .btn-light { background: rgba(255,255,255,.1); border: 0; color: #e2e8f0; }
.dv-accounts { display: grid; gap: .4rem; }
.dv-account { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border: 1px solid var(--dv-line); border-radius: 11px; }
.dv-account > div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dv-account strong { font-size: .86rem; }
.dv-account small { font-size: .74rem; color: var(--dv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; flex-shrink: 0; }
.dv-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.dv-endpoint { display: flex; align-items: center; gap: .5rem; padding: .4rem .4rem .4rem .45rem; border: 1px solid var(--dv-line); border-radius: 11px; background: #f8fafc; }
.dv-endpoint code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none !important; color: #0f172a !important; }

.dv-code { border-radius: 16px; overflow: hidden; background: #0d1117; border: 1px solid #1e293b; box-shadow: 0 16px 36px -22px rgba(2,6,23,.75); margin: .9rem 0; }
.dv-code-head { display: flex; align-items: center; gap: .75rem; padding: .5rem .6rem .5rem .9rem; background: #161b22; border-bottom: 1px solid #21262d; }
.dv-code-title { font: 600 .78rem/1 ui-monospace, Menlo, Consolas, monospace; color: #8b949e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-langs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.dv-langs button { border: 0; background: none; color: #8b949e; font-size: .78rem; font-weight: 600; padding: .3rem .65rem; border-radius: 7px; white-space: nowrap; }
.dv-langs button:hover { color: #e6edf3; }
.dv-langs button.active { background: #30363d; color: #fff; }
.dv-copy { margin-left: auto; border: 1px solid #30363d; background: #21262d; color: #c9d1d9; font-size: .76rem; font-weight: 600; padding: .28rem .65rem; border-radius: 8px; white-space: nowrap; }
.dv-copy:hover { background: #30363d; color: #fff; }
.dv-code pre { margin: 0; max-height: 560px; overflow: auto; }
.dv-code pre code.hljs, .dv-code pre code { display: block; padding: 1rem 1.15rem; background: transparent !important; color: #e6edf3 !important; font: .82rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; white-space: pre; }

.dv-play { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1.25rem; margin-top: 1rem; align-items: start; }
.dv-play-form { padding: 1.2rem; border: 1px solid var(--dv-line); border-radius: 16px; background: #fafcfd; }
.dv-play-form .form-label { font-weight: 600; font-size: .86rem; }
.dv-play-form .form-control, .dv-play-form .form-select { border-radius: 10px; }
.dv-play-out .dv-code { margin-top: 0; }
.dv-send { color: #fff; font-weight: 700; border: 0; border-radius: 12px; padding: .7rem; background: linear-gradient(135deg, #25d366, #128c7e); box-shadow: 0 10px 24px -10px rgba(18,140,126,.8); }
.dv-send:hover { color: #fff; filter: brightness(1.06); }
.dv-send:disabled { background: #cbd5e1; box-shadow: none; }
.dv-play-note { font-size: .78rem; color: var(--dv-muted); text-align: center; margin-top: .6rem; }
.dv-switch { display: inline-flex; align-items: center; gap: .55rem; font-size: .86rem; font-weight: 500; cursor: pointer; margin: 0; user-select: none; }
.dv-switch input { position: absolute; opacity: 0; pointer-events: none; }
.dv-switch span { width: 36px; height: 20px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .2s; flex-shrink: 0; }
.dv-switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.dv-switch input:checked + span { background: var(--brand); }
.dv-switch input:checked + span::after { transform: translateX(16px); }
.dv-switch input:focus-visible + span { outline: 2px solid rgba(18,140,126,.45); outline-offset: 2px; }
.dv-response { border-radius: 14px; overflow: hidden; border: 1px solid #1e293b; background: #0d1117; }
.dv-response-head { display: flex; justify-content: space-between; padding: .5rem .9rem; font: 700 .8rem/1.2 ui-monospace, Menlo, Consolas, monospace; }
.dv-response.ok .dv-response-head { background: rgba(34,197,94,.16); color: #86efac; }
.dv-response.bad .dv-response-head { background: rgba(239,68,68,.16); color: #fca5a5; }
.dv-response pre { margin: 0; }
.dv-response code { display: block; padding: .9rem 1rem; background: transparent !important; color: #e6edf3 !important; font: .82rem/1.6 ui-monospace, Menlo, Consolas, monospace !important; }

.dv-callout { display: flex; gap: .8rem; padding: .95rem 1.1rem; border-radius: 14px; background: #eff6ff; color: #1e3a8a; font-size: .9rem; margin: .9rem 0; }
.dv-callout .bi { font-size: 1.2rem; color: #2563eb; }
.dv-params { border: 1px solid var(--dv-line); border-radius: 14px; overflow: hidden; margin: 1rem 0; }
.dv-param { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; padding: .85rem 1.1rem; }
.dv-param + .dv-param { border-top: 1px solid #f1f5f9; }
.dv-param > div { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.dv-param > div code { font-size: .9rem !important; font-weight: 700; }
.dv-param p { margin: 0; font-size: .9rem; color: #475569; }
.dv-param .req, .dv-param .opt { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .12rem .45rem; border-radius: 6px; }
.dv-param .req { color: #b91c1c; background: #fef2f2; }
.dv-param .opt { color: #475569; background: #f1f5f9; }
.dv-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.dv-chips span { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: #334155; background: #f1f5f9; padding: .3rem .7rem; border-radius: 999px; }

.dv-flow { display: flex; align-items: center; gap: .6rem; margin: 1.1rem 0 .4rem; flex-wrap: wrap; }
.dv-flow > div { flex: 1; min-width: 130px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: .9rem .7rem; border-radius: 14px; border: 1px solid var(--dv-line); background: #fafcfd; }
.dv-flow > div .bi { font-size: 1.4rem; color: var(--brand); margin-bottom: .3rem; }
.dv-flow > div strong { font-size: .88rem; }
.dv-flow > div small { font-size: .76rem; color: var(--dv-muted); }
.dv-flow > div.hl { border-color: var(--brand); background: #f0fdf9; box-shadow: 0 0 0 4px rgba(18,140,126,.08); }
.dv-flow-arrow { color: #94a3b8; font-size: 1.1rem; }
.dv-fields { border: 1px solid var(--dv-line); border-radius: 14px; overflow: hidden; margin: .9rem 0; }
.dv-fields > div { display: grid; grid-template-columns: 110px 1fr; gap: .75rem; padding: .6rem .9rem; font-size: .85rem; }
.dv-fields > div + div { border-top: 1px solid #f1f5f9; }
.dv-fields span { color: #475569; }
.dv-fields > div > code { justify-self: start; align-self: start; }

.dv-hooks { display: grid; gap: .75rem; margin-top: 1rem; }
.dv-hook { padding: .9rem 1rem; border: 1px solid var(--dv-line); border-radius: 14px; background: #fafcfd; }
.dv-hook-who { display: flex; align-items: center; gap: .6rem; margin-bottom: .65rem; }
.dv-hook-who > div { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; }
.dv-hook-who small { color: var(--dv-muted); font-size: .78rem; }
.dv-hook-state { font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; background: #f1f5f9; color: #64748b; }
.dv-hook-state.on { background: #dcfce7; color: #15803d; }
.dv-hook-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.dv-hook-form .form-control { flex: 1; min-width: 220px; border-radius: 10px; }
.dv-hook-form .btn { border-radius: 10px; }
.dv-hook-result { margin-top: .6rem; padding: .55rem .8rem; border-radius: 10px; font-size: .85rem; }
.dv-hook-result.ok { background: #f0fdf4; color: #166534; }
.dv-hook-result.bad { background: #fef2f2; color: #991b1b; }
.dv-hook-result code { display: block; margin-top: .3rem; font-size: .78rem; white-space: pre-wrap; word-break: break-all; background: rgba(255,255,255,.6) !important; color: inherit !important; }

.dv-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.dv-grid3 > div { padding: 1rem; border-radius: 14px; border: 1px solid var(--dv-line); background: #fafcfd; display: flex; flex-direction: column; gap: .2rem; }
.dv-grid3 .bi { font-size: 1.25rem; color: var(--brand); }
.dv-grid3 strong { font-size: .92rem; }
.dv-grid3 small { color: var(--dv-muted); font-size: .82rem; line-height: 1.5; }
.dv-errors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }
.dv-error { display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--dv-line); border-radius: 14px; }
.dv-error p { grid-column: 2; margin: 0; font-size: .84rem; color: #475569; }
.dv-code-pill { grid-row: span 2; font: 800 .95rem/1 ui-monospace, Menlo, Consolas, monospace; padding: .55rem .6rem; border-radius: 10px; }
.dv-code-pill.ok { background: #dcfce7; color: #15803d; }
.dv-code-pill.warn { background: #fef3c7; color: #b45309; }
.dv-code-pill.bad { background: #fee2e2; color: #b91c1c; }
.dv-recipe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
.dv-recipe-col { padding: 1.1rem 1.2rem; border-radius: 14px; border: 1px solid var(--dv-line); background: #fafcfd; }
.dv-recipe-col h5 { font-size: .98rem; font-weight: 700; display: flex; gap: .45rem; align-items: center; }
.dv-recipe-col h5 .bi { color: var(--brand); }
.dv-recipe-col ol { padding-left: 1.1rem; margin: 0; font-size: .87rem; color: #334155; display: grid; gap: .4rem; }
.dv-faq { display: grid; gap: .55rem; margin-top: .9rem; }
.dv-faq details { border: 1px solid var(--dv-line); border-radius: 14px; padding: .85rem 1.1rem; background: #fafcfd; }
.dv-faq details[open] { background: #fff; box-shadow: 0 6px 18px -12px rgba(16,24,40,.25); }
.dv-faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.dv-faq summary::-webkit-details-marker { display: none; }
.dv-faq summary::after { content: "\f282"; font-family: bootstrap-icons; color: #94a3b8; transition: transform .2s; }
.dv-faq details[open] summary::after { transform: rotate(180deg); }
.dv-faq p { margin: .6rem 0 0; color: #475569; font-size: .9rem; }

@media (max-width: 1199.98px) {
    .dv-hero { grid-template-columns: 1fr; }
    .dv-play { grid-template-columns: 1fr; }
    .dv-steps { grid-template-columns: 1fr; gap: 1.4rem; }
}
@media (max-width: 991.98px) {
    .dv-layout { grid-template-columns: 1fr; }
    .dv-nav { position: static; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; max-height: none; gap: .3rem; }
    .dv-nav-title { display: none; }
    .dv-nav a { flex-shrink: 0; background: #fff; border: 1px solid var(--dv-line); }
}
@media (max-width: 767.98px) {
    .dv-hero, .dv-section { padding: 1.3rem; }
    .dv-param, .dv-fields > div { grid-template-columns: 1fr; gap: .3rem; }
    .dv-grid3, .dv-errors, .dv-recipe { grid-template-columns: 1fr; }
    .dv-flow-arrow { display: none; }
}

@media print {
    .sidebar, .topbar, .alert { display: none !important; }
    .main { margin: 0; }
    .bill-receipt-card { box-shadow: none; }
}