*{box-sizing:border-box;margin:0;padding:0} body{font-family:system-ui,-apple-system,sans-serif;background:#f8fafc;color:#0f172a;line-height:1.5;min-height:100vh} .bg-dark{background:#0f172a;color:#f1f5f9} .bg-light_blue{background:#e0f2fe} .wrap{position:relative;z-index:1;min-height:100vh;display:flex} .side{width:220px;background:#0f172a;color:#e2e8f0;padding:1rem 0;flex-shrink:0} .side .brand{padding:0 1rem 1rem;font-weight:700;border-bottom:1px solid #1e293b;margin-bottom:.5rem} .side a{display:block;padding:.55rem 1rem;color:#94a3b8;text-decoration:none;font-size:.9rem} .side a:hover,.side a.active{background:#1e293b;color:#fff} .main{flex:1;padding:1.5rem;overflow-x:auto} .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem} h1{font-size:1.4rem;margin-bottom:.5rem} h2{font-size:1.1rem;margin-bottom:.75rem} h3{font-size:1rem;margin:1rem 0 .5rem} .muted{color:#64748b;font-size:.9rem} .box{background:#fff;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.08);padding:1.5rem;margin:1rem} .bg-dark .box,.bg-dark .card{background:#1e293b;color:#f1f5f9} .center-box{width:460px;max-width:92vw;min-height:460px;margin:4rem auto;padding:2rem 2.25rem;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.14);display:flex;flex-direction:column;justify-content:center;align-self:center;flex:0 0 auto;aspect-ratio:1/1} .center-box.center{align-items:center} .center{text-align:center} .card{background:#fff;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.06);padding:1.25rem;margin-bottom:1rem} /* Welcome balances: no padded white card — a clean centered hero on the page background */ .welcome-wrap{width:520px;max-width:92vw;margin:4rem auto 1.5rem;padding:0;background:transparent;box-shadow:none;border-radius:0;text-align:center} .welcome-title{margin:0 0 .3rem;font-size:1.9rem;line-height:1.2} .welcome-sub{margin:0 0 1.75rem;font-size:.95rem} .welcome-balance{margin:0 0 1.3rem} .welcome-balance-label{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:#64748b;margin-bottom:.4rem} .welcome-balance-amount{font-size:2.6rem;font-weight:700;line-height:1.1;color:#0f172a;word-break:break-word} .welcome-sub-figs{display:flex;justify-content:center;border-top:1px solid rgba(15,23,42,.12);border-bottom:1px solid rgba(15,23,42,.12);margin:0 0 1.6rem} .welcome-sub-figs .wsf{flex:1;padding:.95rem .6rem;display:flex;flex-direction:column;gap:.35rem} .welcome-sub-figs .wsf+.wsf{border-left:1px solid rgba(15,23,42,.12)} .wsf-lbl{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#64748b} .wsf-val{font-size:1.1rem;font-weight:600;color:#1e293b;word-break:break-word} .welcome-hint{font-size:.85rem;margin:0 auto 1.4rem;max-width:30rem} .welcome-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.7rem} .welcome-actions .btn{width:100%} .bg-dark .welcome-balance-amount,.bg-dark .wsf-val{color:#f1f5f9} .bg-dark .welcome-balance-label,.bg-dark .wsf-lbl{color:#94a3b8} .bg-dark .welcome-sub-figs,.bg-dark .welcome-sub-figs .wsf+.wsf{border-color:rgba(241,245,249,.16)} @media(max-width:480px){.welcome-actions{grid-template-columns:1fr}.welcome-balance-amount{font-size:2.1rem}} .grid3,.grid4{display:grid;gap:1rem;margin:1rem 0} .grid3{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .grid4{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));max-width:900px;margin:1.5rem auto;padding:0 1rem} .lbl{font-size:.8rem;color:#64748b} .val{font-size:1.6rem;font-weight:700} label{display:block;font-weight:600;font-size:.85rem;margin:0.75rem 0 .3rem} input,select,textarea{width:100%;padding:.6rem .8rem;border:1px solid #cbd5e1;border-radius:8px;font-size:1rem;margin-bottom:.25rem} input:focus,select:focus{outline:none;border-color:#0d6efd;box-shadow:0 0 0 3px rgba(13,110,253,.15)} .chk{display:flex;align-items:center;gap:.4rem;font-weight:400;margin:.3rem 0} .chk input{width:auto} .btn{display:inline-flex;align-items:center;padding:.6rem 1.1rem;border:none;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;background:#0d6efd;color:#fff;text-decoration:none;margin:.25rem .25rem .25rem 0} .btn:hover{background:#0b5ed7} .btn.outline{background:transparent;border:1px solid #cbd5e1;color:inherit} .btn.sm{padding:.35rem .7rem;font-size:.8rem} .btn.block{width:100%;justify-content:center} .alert{padding:.8rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.9rem} .alert.ok{background:#dcfce7;color:#166534} .alert.err{background:#fee2e2;color:#991b1b} .cred{background:#fef3c7;border:2px dashed #f59e0b;border-radius:10px;padding:1rem;margin:1rem 0;text-align:center} .cred code{font-size:1.1rem;font-weight:700} table{width:100%;border-collapse:collapse;font-size:.9rem} th,td{padding:.65rem;text-align:left;border-bottom:1px solid #e2e8f0} th{background:#f1f5f9;font-weight:600} .bg-dark th{background:#334155} .nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;max-width:1000px;margin:0 auto} .hero{text-align:center;padding:4rem 1.5rem 2rem} .hero h1{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:800;margin-bottom:.5rem} .hero p{color:#64748b;max-width:500px;margin:0 auto 1.25rem} .foot{text-align:center;padding:2rem;color:#64748b;font-size:.85rem} hr{border:none;border-top:1px solid #e2e8f0;margin:1rem 0} @media(max-width:768px){.wrap{flex-direction:column}.side{width:100%}} /* ── Support Chat ─────────────────────────────────────── */ .chat-layout{display:flex;gap:1rem;min-height:520px;align-items:stretch} .chat-list{width:300px;flex-shrink:0;background:#fff;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.06);display:flex;flex-direction:column;overflow:hidden} .chat-list-header{padding:.75rem 1rem;border-bottom:1px solid #e2e8f0;font-size:.95rem} .chat-new{padding:.75rem;border-bottom:1px solid #e2e8f0} .chat-new textarea{margin-bottom:.4rem;font-size:.9rem} .chat-conv-list{overflow-y:auto;flex:1} .chat-conv{display:block;padding:.75rem 1rem;border-bottom:1px solid #f1f5f9;text-decoration:none;color:inherit;transition:background .15s} .chat-conv:hover,.chat-conv.active{background:#f1f5f9} .chat-conv-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem} .chat-conv-preview{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.15rem} .chat-conv-meta{display:flex;justify-content:space-between;align-items:center;margin-top:.25rem;font-size:.75rem} .chat-pane{flex:1;background:#fff;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.06);display:flex;flex-direction:column;min-width:0} .chat-pane-empty{align-items:center;justify-content:center} .chat-pane-header{padding:1rem;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap} .chat-pane-header h2{margin:0;font-size:1.05rem} .chat-admin-tools{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end} .chat-tools{display:flex;flex-direction:column;gap:.2rem;margin:0} .chat-tools label{margin:0;font-size:.75rem} .chat-tools select{padding:.35rem .5rem;font-size:.85rem;margin:0;width:auto;min-width:110px} .chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:#f8fafc;min-height:280px;max-height:420px} .chat-bubble{max-width:75%;padding:.65rem .9rem;border-radius:12px;font-size:.92rem;line-height:1.4} .chat-bubble.mine{align-self:flex-end;background:#0d6efd;color:#fff;border-bottom-right-radius:4px} .chat-bubble.mine .muted{color:rgba(255,255,255,.75)} .chat-bubble.theirs{align-self:flex-start;background:#fff;border:1px solid #e2e8f0;border-bottom-left-radius:4px} .chat-bubble.bot{align-self:flex-start;background:linear-gradient(135deg,#eef4ff,#e7fbf2);border:1px solid #bcd4ff;border-bottom-left-radius:4px;color:#0f2544} .chat-bubble.bot .chat-meta strong{color:#1d4ed8} /* Live-chat launcher (standalone link for staff/master/guest, or button inside .chat-widget) */ .chat-launcher{position:fixed;right:18px;bottom:18px;z-index:9998;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;background:#0d6efd;color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;box-shadow:0 10px 28px rgba(13,110,253,.4);border:none;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s} .chat-launcher:hover{background:#0b5ed7;transform:translateY(-1px)} .chat-launcher .chat-launcher-badge{background:#ef4444;color:#fff;border-radius:999px;padding:1px 7px;font-size:.72rem;min-width:18px;text-align:center;font-weight:700;line-height:1.2;box-shadow:0 0 0 2px rgba(255,255,255,.35)} /* Green online indicator */ .chat-online-dot{position:absolute;top:4px;left:4px;width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid #fff;box-shadow:0 0 0 1px rgba(34,197,94,.45);z-index:2;pointer-events:none;animation:chatOnlinePulse 2s ease-in-out infinite} @keyframes chatOnlinePulse{0%,100%{box-shadow:0 0 0 1px rgba(34,197,94,.45)}50%{box-shadow:0 0 0 4px rgba(34,197,94,.25)}} /* Widget wrapper owns fixed positioning; launcher inside is relative so the panel anchors correctly */ .chat-widget{position:fixed;right:18px;bottom:18px;z-index:9999} .chat-widget .chat-launcher{position:relative;right:auto;bottom:auto} @media(max-width:700px){ .chat-launcher{right:12px;bottom:12px;padding:10px 14px} .chat-widget{right:12px;bottom:12px} } html[dir="rtl"] .chat-launcher,html[dir="rtl"] .chat-widget{right:auto;left:18px} html[dir="rtl"] .chat-online-dot{left:auto;right:4px} .chat-meta{font-size:.75rem;margin-bottom:.25rem} .chat-text{word-wrap:break-word} .chat-composer{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid #e2e8f0;background:#fff} .chat-composer textarea{flex:1;margin:0;resize:none;min-height:44px} .chat-composer .btn{align-self:flex-end} .chat-empty{padding:2rem 1rem;text-align:center} .chat-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .35rem;border-radius:999px;background:#ef4444;color:#fff;font-size:.7rem;font-weight:700} .status-pill{display:inline-block;padding:.1rem .45rem;border-radius:999px;font-size:.7rem;font-weight:600;text-transform:capitalize} .status-open{background:#dbeafe;color:#1d4ed8} .status-pending{background:#fef3c7;color:#b45309} .status-resolved{background:#dcfce7;color:#15803d} .status-answered{background:#fef3c7;color:#b45309} @media (max-width:800px){ .chat-layout{flex-direction:column} .chat-list{width:100%;max-height:220px} .chat-messages{max-height:320px} } /* ── Public landing page (Lotivo-inspired, brand-driven) ── */ .lp-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);background:rgba(255,255,255,.9);border-bottom:1px solid #e2e8f0} .bg-dark .lp-header{background:rgba(15,23,42,.92);border-color:#1e293b} .bg-light_blue .lp-header{background:rgba(224,242,254,.95)} .lp-container{max-width:1100px;margin:0 auto;padding:0 1.25rem} .lp-nav{display:flex;align-items:center;gap:1rem;min-height:64px} .lp-brand{display:flex;align-items:center;gap:.5rem;font-weight:800;text-decoration:none;color:inherit;font-size:1.15rem} .lp-logo-img{height:32px;width:auto} .lp-menu{display:flex;gap:1rem;flex:1;justify-content:center} .lp-menu a{text-decoration:none;color:#64748b;font-size:.9rem;font-weight:600} .lp-menu a:hover,.lp-menu a.active{color:#0d6efd} .bg-dark .lp-menu a:hover,.bg-dark .lp-menu a.active{color:#93c5fd} .lp-auth{display:flex;gap:.4rem} /* Reserve header space so the fixed language switcher never overlaps Sign In / Sign Up (or the burger) */ body.lp-page .lp-nav{padding-right:210px} @media (max-width:900px){body.lp-page .lp-nav{padding-right:188px}} @media (max-width:700px){body.lp-page .lp-nav{padding-right:118px}} @media (max-width:480px){body.lp-page .lp-nav{padding-right:96px}} .lp-burger{display:none;background:none;border:1px solid #cbd5e1;border-radius:8px;padding:.35rem .55rem;cursor:pointer} .lp-hero{padding:3.5rem 0 2.5rem} .lp-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center} .lp-hero-copy h1{font-size:clamp(1.8rem,4.5vw,2.8rem);font-weight:800;line-height:1.15;margin-bottom:.75rem} .lp-hero-copy p{color:#64748b;margin-bottom:1.25rem;max-width:36rem} .bg-dark .lp-hero-copy p{color:#94a3b8} .lp-ticker{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem} .lp-tick-item{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:.5rem .8rem;font-size:.85rem} .bg-dark .lp-tick-item{background:#1e293b;border-color:#334155} .lp-tick-sym{font-weight:700;margin-right:.5rem} .lp-hero-card h3{margin-bottom:.75rem} .lp-amount-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem} .lp-returns{display:flex;justify-content:space-between;align-items:flex-start;margin:.75rem 0 1rem;padding:.75rem;background:#f8fafc;border-radius:8px} .bg-dark .lp-returns{background:#0f172a} .lp-calc-note{font-size:.8rem;margin-top:.75rem} .lp-section{padding:3rem 0} .lp-alt{background:rgba(148,163,184,.08)} .lp-section-head{text-align:center;max-width:560px;margin:0 auto 2rem} .lp-section-head.left{text-align:left;margin-left:0} .lp-eyebrow{display:inline-block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#0d6efd;margin-bottom:.35rem} .lp-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem} .lp-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem} .lp-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem} .lp-grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem} .lp-grid-2 .card,.lp-grid-3 .card,.lp-grid-4 .card{margin:0;height:100%} .lp-faq{display:grid;gap:.75rem} .lp-faq details{padding:1rem 1.25rem;cursor:pointer} .lp-faq summary{font-weight:700;list-style:none;outline:none} .lp-faq summary::-webkit-details-marker{display:none} .lp-faq summary::after{content:"+";float:right;color:#0d6efd;font-weight:700} .lp-faq details[open] summary::after{content:"\2212"} .lp-faq details p{margin-top:.6rem;color:#64748b;font-weight:400} .bg-dark .lp-faq details p{color:#94a3b8} .lp-feature h4{margin:.5rem 0 .35rem} .lp-feature p{font-size:.9rem;color:#64748b} .bg-dark .lp-feature p{color:#94a3b8} .lp-ico{font-size:1.5rem} .lp-split{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center} .lp-list{list-style:none;margin:0 0 1.25rem;padding:0} .lp-list li{padding:.65rem 0;border-bottom:1px solid #e2e8f0;font-size:.95rem} .bg-dark .lp-list li{border-color:#334155} .lp-visual-mock{padding:1rem} .lp-mock-bar{height:10px;width:40%;background:#0d6efd;border-radius:6px;margin-bottom:1rem} .lp-mock-row{display:flex;justify-content:space-between;padding:.55rem 0;border-bottom:1px solid #e2e8f0;font-weight:600} .bg-dark .lp-mock-row{border-color:#334155} .lp-mock-row .ok{color:#16a34a} .lp-mock-cta{margin-top:1rem;font-size:.85rem;color:#64748b} .lp-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem} .lp-quotes blockquote p{font-style:italic;margin-bottom:.75rem} .lp-quotes footer{font-size:.85rem;color:#64748b} .lp-address{font-size:1.05rem;margin:.5rem 0 1rem} .lp-footer{border-top:1px solid #e2e8f0;padding:2rem 0;margin-top:1rem} .bg-dark .lp-footer{border-color:#1e293b} .lp-footer-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem} .lp-footer-links{display:flex;gap:1rem;flex-wrap:wrap} .lp-footer-links a{color:#64748b;text-decoration:none;font-size:.9rem} .lp-copy{text-align:center;color:#64748b;font-size:.85rem} @media (max-width:900px){ .lp-hero-grid,.lp-split{grid-template-columns:1fr} .lp-menu{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:#fff;padding:1rem;border-bottom:1px solid #e2e8f0} .bg-dark .lp-menu{background:#0f172a;border-color:#1e293b} .lp-menu.open{display:flex} .lp-burger{display:inline-block;margin-left:auto} .lp-auth{display:none} .lp-menu.open + .lp-auth,.lp-nav .lp-auth{ } } @media (max-width:900px){ .lp-nav{flex-wrap:wrap} .lp-menu.open{width:100%;order:3} } /* Landing page: stack sections (override dashboard .wrap flex row) */ body.lp-page .wrap{display:block;flex-direction:column} body.lp-page .lp-header,body.lp-page .lp-hero,body.lp-page .lp-section,body.lp-page .lp-footer{width:100%} /* Landing photos */ .lp-photo{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 12px 40px rgba(15,23,42,.15);object-fit:cover} .lp-quote-card{padding:0;overflow:hidden;display:flex;flex-direction:column} .lp-quote-photo{width:100%;height:220px;object-fit:cover;object-position:center top;display:block} .lp-quote-body{padding:1rem 1.1rem 1.2rem} .lp-quote-body p{font-style:italic;margin:0 0 .85rem;font-size:.95rem;line-height:1.45} .lp-quote-body footer{display:flex;flex-direction:column;gap:.15rem;font-size:.85rem;color:#64748b} .lp-quote-body footer strong{color:inherit;font-size:.9rem} .bg-dark .lp-quote-body footer{color:#94a3b8} @media (min-width:900px){ .lp-quote-card{display:grid;grid-template-columns:140px 1fr;align-items:stretch} .lp-quote-photo{height:100%;min-height:180px} } /* Featured landing photo (crypto concept) */ .lp-photo-feature{object-position:center 20%;min-height:280px;max-height:480px;width:100%;object-fit:cover} .lp-photo-caption{margin:.65rem 0 0;font-size:.85rem;text-align:center} .lp-visual{position:relative} .lp-photo-inset{position:absolute;right:-8px;bottom:40px;width:38%;max-width:220px;min-height:0;max-height:none;border:3px solid #fff;border-radius:14px;box-shadow:0 10px 30px rgba(15,23,42,.28)} @media (max-width:640px){.lp-photo-inset{position:static;width:62%;margin:.6rem auto 0;display:block}} @media (min-width:900px){ .lp-photo-feature{max-height:520px} } /* ── 15 professional bank themes ───────────────────────── */ body[class*="theme-"]{background:var(--theme-bg);color:var(--theme-text)} .theme-executive_navy{--theme-bg:#f4f7fb;--theme-surface:#fff;--theme-text:#0f172a;--theme-muted:#64748b;--theme-accent:#173b6c;--theme-accent2:#2d6cdf;--theme-border:#d9e2ef;--theme-side:#0b1f3a} .theme-royal_blue{--theme-bg:#f5f8ff;--theme-surface:#fff;--theme-text:#102044;--theme-muted:#63739a;--theme-accent:#2457d6;--theme-accent2:#5b7cfa;--theme-border:#d8e2ff;--theme-side:#12265b} .theme-midnight_blue{--theme-bg:#0b1220;--theme-surface:#111c30;--theme-text:#eef4ff;--theme-muted:#a8b6cf;--theme-accent:#4f8cff;--theme-accent2:#7aa7ff;--theme-border:#263a5d;--theme-side:#07101d} .theme-cyber_cyan{--theme-bg:#081619;--theme-surface:#102326;--theme-text:#e8fbff;--theme-muted:#91b9c0;--theme-accent:#00b8d9;--theme-accent2:#2de1fc;--theme-border:#21434a;--theme-side:#061113} .theme-emerald_finance{--theme-bg:#f3faf7;--theme-surface:#fff;--theme-text:#10271e;--theme-muted:#668076;--theme-accent:#087f5b;--theme-accent2:#12b886;--theme-border:#d6eee4;--theme-side:#0b3d2e} .theme-forest_green{--theme-bg:#f4f8f3;--theme-surface:#fff;--theme-text:#17251a;--theme-muted:#69786b;--theme-accent:#2f6b3d;--theme-accent2:#4f8f5b;--theme-border:#dce8de;--theme-side:#193a22} .theme-royal_purple{--theme-bg:#f8f6fc;--theme-surface:#fff;--theme-text:#211a35;--theme-muted:#756b88;--theme-accent:#663399;--theme-accent2:#8e5bd5;--theme-border:#e5dcf1;--theme-side:#2b1746} .theme-deep_violet{--theme-bg:#100d19;--theme-surface:#191426;--theme-text:#f4efff;--theme-muted:#b9afd0;--theme-accent:#8b5cf6;--theme-accent2:#a78bfa;--theme-border:#342a4d;--theme-side:#0a0710} .theme-black_gold{--theme-bg:#10100e;--theme-surface:#191814;--theme-text:#f7f1df;--theme-muted:#b7ad93;--theme-accent:#b9913e;--theme-accent2:#d7b45a;--theme-border:#3b3424;--theme-side:#080806} .theme-slate_silver{--theme-bg:#eef2f5;--theme-surface:#fff;--theme-text:#202832;--theme-muted:#687481;--theme-accent:#4b5968;--theme-accent2:#7b8a99;--theme-border:#d7dfe7;--theme-side:#293541} .theme-arctic_blue{--theme-bg:#eef9fc;--theme-surface:#fff;--theme-text:#102832;--theme-muted:#67818b;--theme-accent:#168aad;--theme-accent2:#36b7d4;--theme-border:#d3edf3;--theme-side:#0d4456} .theme-ocean_teal{--theme-bg:#eef8f7;--theme-surface:#fff;--theme-text:#102624;--theme-muted:#67807d;--theme-accent:#0f766e;--theme-accent2:#2aa198;--theme-border:#d3e9e6;--theme-side:#0c4541} .theme-crimson_exec{--theme-bg:#fbf5f6;--theme-surface:#fff;--theme-text:#2b171b;--theme-muted:#80666b;--theme-accent:#9f1239;--theme-accent2:#d33b61;--theme-border:#efd9df;--theme-side:#4a1021} .theme-graphite_dark{--theme-bg:#111315;--theme-surface:#1b1f23;--theme-text:#f1f4f6;--theme-muted:#a5adb5;--theme-accent:#6f8da8;--theme-accent2:#9fb6ca;--theme-border:#30373d;--theme-side:#0a0c0e} .theme-platinum_light{--theme-bg:#f6f7f8;--theme-surface:#fff;--theme-text:#25282d;--theme-muted:#707780;--theme-accent:#3f4852;--theme-accent2:#68737e;--theme-border:#dfe3e7;--theme-side:#30363d} body[class*="theme-"] .side{background:var(--theme-side);color:var(--theme-text)} body[class*="theme-"] .side .brand{border-color:var(--theme-border)} body[class*="theme-"] .side a{color:var(--theme-muted)} body[class*="theme-"] .side a:hover,body[class*="theme-"] .side a.active{background:var(--theme-accent);color:#fff} body[class*="theme-"] .card,body[class*="theme-"] .box,body[class*="theme-"] .chat-list,body[class*="theme-"] .chat-pane{background:var(--theme-surface);color:var(--theme-text);border-color:var(--theme-border)} body[class*="theme-"] input,body[class*="theme-"] select,body[class*="theme-"] textarea{background:var(--theme-surface);color:var(--theme-text);border-color:var(--theme-border)} body[class*="theme-"] input:focus,body[class*="theme-"] select:focus,body[class*="theme-"] textarea:focus{border-color:var(--theme-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent) 18%,transparent)} body[class*="theme-"] .btn{background:var(--theme-accent);color:#fff} body[class*="theme-"] .btn:hover{background:var(--theme-accent2)} body[class*="theme-"] .btn.outline{background:transparent;color:var(--theme-text);border-color:var(--theme-border)} body[class*="theme-"] th{background:color-mix(in srgb,var(--theme-accent) 8%,var(--theme-surface));border-color:var(--theme-border)} body[class*="theme-"] th,body[class*="theme-"] td{border-color:var(--theme-border)} body[class*="theme-"] .muted{color:var(--theme-muted)} body[class*="theme-"] hr{border-color:var(--theme-border)} body[class*="theme-"] .lp-header{background:color-mix(in srgb,var(--theme-surface) 94%,transparent);border-color:var(--theme-border)} body[class*="theme-"] .lp-menu a:hover,body[class*="theme-"] .lp-menu a.active,body[class*="theme-"] .lp-eyebrow{color:var(--theme-accent)} body[class*="theme-"] .lp-tick-item{background:var(--theme-surface);border-color:var(--theme-border)} body[class*="theme-"] .lp-footer{border-color:var(--theme-border)} .inline-form{display:inline-block;margin:.1rem .15rem 0 0}.inline-form .btn{margin:0}.btn.danger{background:#b42318!important}.btn.danger:hover{background:#8f1c13!important}.branding-thumb{width:58px;height:42px;object-fit:contain;border:1px solid var(--theme-border);border-radius:6px;padding:3px;background:var(--theme-surface)} .status-active{background:#dcfce7;color:#166534}.status-disabled{background:#fee2e2;color:#991b1b}.status-deleted{background:#e5e7eb;color:#374151}.status-locked{background:#fef3c7;color:#92400e} @media(max-width:768px){.logo-pattern-bg{grid-template-columns:repeat(auto-fill,minmax(82px,1fr));grid-auto-rows:82px;gap:25px;padding:25px}.logo-pattern-mark img{width:min(var(--mark-size),48px);height:min(var(--mark-size),48px)}table{min-width:720px}} /* Public feature cards: interactive, content-led components */ .lp-features .lp-feature { cursor:pointer; } .lp-features details.lp-feature { padding:0; overflow:hidden; } .lp-features details.lp-feature summary { list-style:none; display:flex; align-items:center; gap:14px; min-height:92px; padding:18px 20px; cursor:pointer; user-select:none; } .lp-features details.lp-feature summary::-webkit-details-marker { display:none; } .lp-features details.lp-feature summary > span:last-child { display:flex; flex-direction:column; gap:4px; } .lp-features details.lp-feature summary strong { font-size:1rem; } .lp-features details.lp-feature summary small { opacity:.68; font-size:.78rem; } .lp-ico-mark { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; border:1px solid currentColor; font-size:.72rem; font-weight:800; letter-spacing:.04em; flex:0 0 42px; } .lp-feature-body { padding:0 20px 20px 76px; } .lp-feature-body p { margin:0 0 12px; line-height:1.65; } .lp-feature-link { font-weight:700; text-decoration:none; } .lp-feature-link:hover { text-decoration:underline; } /* Edge back / forward navigation (all pages via layout) */ .tpcb-edge-nav{ position:fixed;top:50%;transform:translateY(-50%);z-index:9998; width:42px;height:42px;border-radius:999px;border:1px solid rgba(15,23,42,.12); background:rgba(255,255,255,.92);color:#0f172a;font-size:1.25rem;line-height:1; display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.12); transition:top .28s ease, background .15s, transform .15s, opacity .15s; padding:0;user-select:none;opacity:.9; } /* Once JS has measured a clear vertical slot it switches to pixel positioning (class added) so the arrow can glide to an area with no text/controls. */ .tpcb-edge-nav.tpcb-nav-ready{transform:none} .tpcb-edge-nav:hover{background:#fff;opacity:1;transform:translateY(-50%) scale(1.06)} .tpcb-edge-nav:active{transform:translateY(-50%) scale(.96)} .tpcb-edge-nav.tpcb-nav-ready:hover{transform:scale(1.06)} .tpcb-edge-nav.tpcb-nav-ready:active{transform:scale(.96)} .tpcb-edge-nav[hidden]{display:none} .tpcb-edge-back{left:10px} .tpcb-edge-fwd{right:10px} body[class*="theme-"] .tpcb-edge-nav{ background:color-mix(in srgb,var(--theme-surface,#fff) 92%,transparent); color:var(--theme-text,#0f172a); border-color:var(--theme-border,#e2e8f0); } body[class*="theme-"] .tpcb-edge-nav:hover{background:var(--theme-surface,#fff);color:var(--theme-accent,#173b6c)} html[dir="rtl"] .tpcb-edge-back{left:auto;right:10px} html[dir="rtl"] .tpcb-edge-fwd{right:auto;left:10px} @media(max-width:700px){ .tpcb-edge-nav{width:36px;height:36px;font-size:1.1rem} .tpcb-edge-back{left:6px} .tpcb-edge-fwd{right:6px} } /* Auth cards (sign in / sign up): squared corners & professional alignment */ .auth-box.center-box{width:460px;min-height:460px;max-width:92vw;aspect-ratio:1/1;margin:auto;padding:2rem 2.25rem;border-radius:16px;box-shadow:0 22px 60px rgba(0,0,0,.38);display:flex;flex-direction:column;justify-content:center;overflow:auto} .auth-box input,.auth-box select,.auth-box textarea,.auth-box .btn{border-radius:8px} .auth-head{text-align:center;margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px solid #e2e8f0} .auth-head h1{margin-bottom:.25rem} .auth-head p{margin:.15rem 0 0} .bg-dark .auth-head{border-color:#334155} body[class*="theme-"] .auth-head{border-color:var(--theme-border)} .auth-box form{margin-top:.25rem} .auth-box label{margin-top:.5rem} .auth-box .btn.block{margin-top:1rem} .auth-foot{margin-top:.9rem;text-align:center} /* Password strength indicator (sign-in form) */ .pw-meter{height:6px;width:100%;background:#e2e8f0;overflow:hidden;margin:.1rem 0 .3rem} .pw-meter-bar{display:block;height:100%;width:0;background:#e2e8f0;transition:width .2s ease,background .2s ease} .pw-hint{font-size:.75rem;margin:0 0 .25rem;min-height:1em} .bg-dark .pw-meter,body[class*="theme-"] .pw-meter{background:#334155} /* Public live two-way converter */ .lp-converter{max-width:760px;margin:0 auto} .lp-conv-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:.75rem;align-items:end} .lp-conv-field label{display:block;font-size:.8rem;font-weight:600;margin:0 0 .25rem} .lp-conv-field .form-control,.lp-conv-field input,.lp-conv-field select{width:100%} .lp-conv-result{margin-top:1rem;min-height:1.5rem;line-height:1.6} .lp-conv-result strong{font-size:1.15rem} @media(max-width:640px){.lp-conv-grid{grid-template-columns:1fr}} /* ============================================================ HIGH-VISIBILITY NOTIFICATIONS Transaction, live-chat, withdrawal request & approve/reject alerts are made strongly noticeable: colour accent, icon, shadow and an attention pulse. ============================================================ */ .alert{position:relative;border-left:5px solid transparent;box-shadow:0 2px 10px rgba(15,23,42,.08)} .alert.ok{background:#dcfce7;color:#166534;border-left-color:#16a34a} .alert.err{background:#fee2e2;color:#991b1b;border-left-color:#dc2626} .alert.warn{background:#fef3c7;color:#92400e;border-left-color:#f59e0b} .alert.info{background:#dbeafe;color:#1e3a8a;border-left-color:#2563eb} .alert.alert-strong{display:flex;align-items:flex-start;gap:.7rem;border-left-width:6px;font-size:.95rem;padding:1rem 1.1rem;border-radius:10px;box-shadow:0 6px 22px rgba(15,23,42,.16);animation:tpcbAlertPulse 1.8s ease-in-out infinite} .alert.alert-strong .alert-ico{font-size:1.4rem;line-height:1.2;flex:0 0 auto} .alert.alert-strong strong{font-size:1.02rem} @keyframes tpcbAlertPulse{0%,100%{box-shadow:0 6px 22px rgba(15,23,42,.16)}50%{box-shadow:0 6px 26px rgba(220,38,38,.38)}} .alert.alert-strong.ok{animation-name:tpcbAlertPulseOk} @keyframes tpcbAlertPulseOk{0%,100%{box-shadow:0 6px 22px rgba(15,23,42,.16)}50%{box-shadow:0 6px 26px rgba(22,163,74,.38)}} .alert.alert-strong.warn{animation-name:tpcbAlertPulseWarn} @keyframes tpcbAlertPulseWarn{0%,100%{box-shadow:0 6px 22px rgba(15,23,42,.16)}50%{box-shadow:0 6px 26px rgba(245,158,11,.42)}} .fee-cta{margin-top:.8rem;padding-top:.7rem;border-top:1px dashed rgba(0,0,0,.18)} .fee-cta-btn{background:#f59e0b;color:#1f2937;font-weight:700;box-shadow:0 4px 14px rgba(245,158,11,.45)} .fee-cta-btn:hover{background:#d97706;color:#fff} .chat-launcher-alert{animation:tpcbChatPulse 1.4s ease-in-out infinite} @keyframes tpcbChatPulse{0%,100%{box-shadow:0 10px 28px rgba(13,110,253,.4)}50%{box-shadow:0 0 0 10px rgba(13,110,253,.18),0 10px 28px rgba(13,110,253,.55)}} .chat-launcher-badge{position:relative;background:#ef4444;color:#fff;border-radius:999px;padding:1px 7px;font-size:.72rem;font-weight:700;min-width:18px;text-align:center;box-shadow:0 0 0 2px #fff} .inbox-item{border-left:5px solid #2563eb;box-shadow:0 2px 10px rgba(15,23,42,.08)} .inbox-item.unread{background:#eff6ff;border-left-color:#dc2626} .inbox-item .inbox-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#dc2626;margin-right:.4rem;vertical-align:middle} .wd-status{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.75rem;font-weight:700;text-transform:capitalize} .wd-status.wd-ok{background:#dcfce7;color:#166534} .wd-status.wd-no{background:#fee2e2;color:#991b1b} .wd-status.wd-pending{background:#fef3c7;color:#92400e} /* Notice-text assistant ("robot") on Withdrawal Control */ .tpcb-fa h2{display:flex;align-items:center;gap:.5rem} .tpcb-fa-bot{font-size:1.3rem;line-height:1} .tpcb-fa-group{margin:1rem 0;padding:.9rem 1rem;border:1px solid #e5e7eb;border-radius:12px;background:#f8fafc} .tpcb-fa-group h3{margin:0 0 .15rem;font-size:.95rem} .tpcb-fa-hint{margin:.1rem 0 .6rem;font-size:.78rem} .tpcb-fa-opt{display:flex;align-items:flex-start;gap:.75rem;padding:.55rem 0;border-top:1px dashed #e5e7eb} .tpcb-fa-opt:first-of-type{border-top:none} .tpcb-fa-txt{flex:1;min-width:0} .tpcb-fa-tag{display:inline-block;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:#2563eb;background:#dbeafe;border-radius:999px;padding:.1rem .5rem;margin-bottom:.3rem} .tpcb-fa-txt p{margin:0;font-size:.84rem;color:#334155;line-height:1.45} .tpcb-fa-apply{flex:0 0 auto;align-self:center;white-space:nowrap} /* Live preview mode on Withdrawal Control */ .tpcb-pv h2{display:flex;align-items:center;gap:.5rem} .tpcb-pv-eye{font-size:1.2rem;line-height:1} .tpcb-pv-sample{display:flex;flex-wrap:wrap;gap:.75rem;margin:.6rem 0 1rem} .tpcb-pv-sample label{display:flex;flex-direction:column;font-size:.78rem;font-weight:600;color:#475569;gap:.2rem} .tpcb-pv-sample input{width:9rem;font-weight:400} .tpcb-pv-cap{margin:.9rem 0 .35rem;font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em} .tpcb-pv-screen{border:1px dashed #cbd5e1;border-radius:12px;padding:.9rem;background:#f1f5f9} .tpcb-pv-screen .alert{margin:0} .tpcb-pv-screen .fee-cta-btn{cursor:default} /* Preview validation + dark-mode preview */ .tpcb-pv-toggle{flex-direction:row!important;align-items:center;gap:.4rem;font-weight:600;color:#475569;align-self:flex-end} .tpcb-pv-toggle input{width:auto} .tpcb-pv-validate{margin:.1rem 0 1rem} .tpcb-pv-msg{font-size:.82rem;padding:.4rem .65rem;border-radius:8px;margin:.3rem 0;line-height:1.4} .tpcb-pv-ok{background:#dcfce7;color:#166534} .tpcb-pv-warn{background:#fef3c7;color:#92400e} .tpcb-pv-err{background:#fee2e2;color:#991b1b} #pv-stage.pv-dark .tpcb-pv-screen{background:#0f172a;border-color:#334155} #pv-stage.pv-dark .tpcb-pv-cap{color:#94a3b8} #pv-stage.pv-dark .alert.err{background:#3f1d1d;color:#fecaca;border-color:#7f1d1d} #pv-stage.pv-dark .alert.warn{background:#3a2e12;color:#fde68a;border-color:#854d0e} #pv-stage.pv-dark .alert strong{color:#f8fafc} #pv-stage.pv-dark .alert .muted{color:#cbd5e1} #pv-stage.pv-dark .fee-cta-btn{background:#2563eb;color:#fff} /* Copy-to-clipboard + responsive preview */ .tpcb-pv-copy{margin:.55rem 0 .2rem;font-size:.78rem;padding:.4rem .8rem} .tpcb-pv-copied{background:#16a34a!important;color:#fff!important;border-color:#16a34a!important} @media(max-width:640px){ .tpcb-pv-sample{flex-direction:column;align-items:stretch;gap:.55rem} .tpcb-pv-sample label{width:100%} .tpcb-pv-sample input{width:100%} .tpcb-pv-toggle{align-self:flex-start} .tpcb-pv-copy{width:100%} .tpcb-fa-opt{flex-direction:column;align-items:stretch;gap:.5rem} .tpcb-fa-apply{align-self:flex-start} .tpcb-pv-screen{padding:.7rem} .tpcb-pv-screen .alert.alert-strong{flex-direction:column;gap:.4rem} } /* ============================================================ FIXED FULL-PAGE BACKGROUND (non-scrolling) + AUTO-READABLE TEXT A subtle background covers the whole viewport, stays fixed while the page scrolls, sits BEHIND every element, and never overlaps text or photos (content keeps its own solid card/box surfaces). ============================================================ */ html{min-height:100%} /* Let the fixed background show through the page body */ body,body.bg-dark,body.bg-light_blue,body[class*="theme-"]{background:transparent} body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(135deg,#eef3f9 0%,#e5edf7 50%,#dbe7f5 100%); background-attachment:fixed;background-size:cover;background-position:center; } /* Dark layout: a deep, fixed gradient keeps light text readable */ body.bg-dark::before{background:linear-gradient(135deg,#0b1220 0%,#13233f 55%,#0f172a 100%)} /* Themed pages derive the fixed background from the active theme palette */ body[class*="theme-"]::before{ background:linear-gradient(135deg,var(--theme-bg,#eef3f9) 0%,color-mix(in srgb,var(--theme-bg,#eef3f9) 72%,var(--theme-accent,#2d6cdf) 28%) 100%); } /* Graceful fallback where color-mix is unsupported */ @supports not (color:color-mix(in srgb,white,black)){ body[class*="theme-"]::before{background:var(--theme-bg,#eef3f9)} } /* Keep real content stacked above the fixed background layer */ body>.wrap,body>.lp-page,body>main,body>.logo-pattern-bg{position:relative;z-index:0} /* AUTO-READABLE TEXT: ensure body copy always resolves to a legible colour for the active surface, so text stays readable on any theme or background. Cards/boxes/tables carry their own solid surfaces. */ body:not([class*="theme-"]):not(.bg-dark){color:#0f172a} body.bg-dark{color:#f1f5f9} body[class*="theme-"]{color:var(--theme-text,#0f172a)} /* ── Very noticeable notifications ─────────────────────────── */ /* All flash/notice banners become bold and attention-grabbing with a one-time entrance pop so no notification is easy to miss. */ .alert{font-weight:600;padding:1rem 1.15rem;font-size:.95rem;border-left-width:6px;box-shadow:0 6px 20px rgba(15,23,42,.14);animation:tpcbAlertIn .45s cubic-bezier(.22,1,.36,1) both} .alert strong{font-size:1.02rem} .alert.ok{border-left-color:#16a34a} .alert.err{border-left-color:#dc2626} @keyframes tpcbAlertIn{0%{opacity:0;transform:translateY(-10px) scale(.98)}60%{transform:translateY(2px) scale(1.01)}100%{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.alert,.alert.alert-strong{animation:none}} /* Transaction status notification badges — make each transaction's state pop out at a glance in the customer transaction list and detail. */ .tx-badge{display:inline-block;background:#e2e8f0;color:#334155;padding:.2rem .6rem;border-radius:999px;font-size:.75rem;font-weight:700;text-transform:capitalize;letter-spacing:.2px;box-shadow:0 1px 4px rgba(15,23,42,.12)} .tx-badge.is-completed,.tx-badge.is-approved,.tx-badge.is-success{background:#dcfce7;color:#166534} .tx-badge.is-pending,.tx-badge.is-processing,.tx-badge.is-review{background:#fef3c7;color:#92400e} .tx-badge.is-failed,.tx-badge.is-rejected,.tx-badge.is-cancelled,.tx-badge.is-declined{background:#fee2e2;color:#991b1b} .tx-badge.is-other{background:#e2e8f0;color:#334155} /* ============================================================ UNIVERSAL RESPONSIVE LAYER (added 2026-10-11) The whole platform adapts to EVERY gadget - phone, tablet / iPad, laptop, desktop monitor and ultra-wide - and no text, control or fixed widget ever overlaps another, whether the window is minimised (narrow) or maximised (wide). ============================================================ */ html,body{max-width:100%;overflow-x:hidden} *{min-width:0} img,svg,video,canvas{max-width:100%;height:auto} pre,code{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere} td code,.chat-text,.lp-address,.val{overflow-wrap:anywhere} h1{font-size:clamp(1.2rem,2.4vw,1.75rem);overflow-wrap:anywhere} h2{font-size:clamp(1.02rem,1.8vw,1.3rem);overflow-wrap:anywhere} h3{font-size:clamp(.95rem,1.2vw,1.1rem)} .main,.auth-box,.center-box{scroll-margin-top:72px} /* Reserve top clearance so the fixed floating controls (the top-right language switcher and the top-left account quick-action buttons) never sit on top of the first line of page content - e.g. the dashboard heading or its "Welcome, ..." line. Applied at every viewport width, not only narrow ones. The clearance = control top offset (12px) + control height (~43px) + a comfortable gap, so the heading reads as its own clean row below the band. */ .main{padding-top:4.6rem} /* Keep dashboard content clear of fixed language switcher (top-right) so Staff Admins / My Users action buttons and page controls never overlap it. */ @media(min-width:801px){ .main{padding-right:12.5rem} html[dir="rtl"] .main{padding-right:1.25rem;padding-left:12.5rem} .main .top{flex-wrap:wrap;gap:.6rem} } .tpcb-lang-switch{max-width:min(46vw,220px)} .tpcb-lang-switch select{max-width:120px} @media(max-width:900px){ .main{padding-top:4.6rem} .center-box{margin-top:4.5rem} } @media(max-width:560px){ .main{padding:3.9rem .9rem 1.1rem} .box{margin:3.9rem .6rem 1rem} .center-box{margin:4.2rem auto 1rem;max-width:94vw;min-height:auto;aspect-ratio:auto} .top{flex-direction:column;align-items:flex-start;gap:.5rem} table{font-size:.82rem} th,td{padding:.5rem} } @media(max-width:800px){ .side{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem;padding:.6rem .5rem .6rem} .side .brand{width:100%;border-bottom:none;padding:.2rem .5rem .4rem;margin:0;text-align:center} .side a{padding:.4rem .7rem;border-radius:8px;font-size:.82rem} /* Language + account controls are static above the menu at this width, so no extra top padding is required on the horizontal side bar. */ .main{padding-top:1.1rem;padding-right:1rem} } @media(max-width:480px){ .grid3,.grid4{grid-template-columns:1fr} } @media(min-width:1700px){ .main{padding-left:3rem;padding-right:3rem} .center-box{max-width:440px} } @media(max-width:560px){ .logo-pattern-bg{opacity:.045 !important} } @supports(padding:max(0px)){ .tpcb-lang-switch{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))} .tpcb-account-nav{top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left))} } @media(hover:none) and (pointer:coarse){ .btn,.side a,.tpcb-acc-btn,.lp-menu a{min-height:40px;display:inline-flex;align-items:center} } /* Layout resilience: prevent dashboard labels, translations and controls colliding */ html{scrollbar-gutter:stable} body{overflow-wrap:anywhere} .wrap{min-width:0;align-items:stretch} .main{min-width:0;max-width:100%;overflow-x:auto} .top{gap:1rem;flex-wrap:wrap;align-items:flex-start} .top>*{min-width:0;max-width:100%} h1,h2,h3,h4,.side .brand,.side a,label,th,td,button,.btn,.badge,.muted{overflow-wrap:anywhere;word-break:normal} table{width:100%;border-collapse:collapse} .table-wrap,.table-responsive{max-width:100%;overflow-x:auto} button,input,select,textarea{max-width:100%;min-width:0} form .row,form .grid,form .form-row{min-width:0} .tpcb-lang-switch{max-width:calc(100vw - 24px);flex-wrap:wrap;white-space:normal} .tpcb-lang-switch select{min-width:0;max-width:min(42vw,180px)} .tpcb-account-nav{max-width:calc(100vw - 220px);flex-wrap:wrap} @media(max-width:800px){ .wrap{display:block} .side{width:100%;max-width:100%;padding:.5rem;display:flex;flex-wrap:wrap;gap:.2rem} .side .brand{width:100%;padding:.5rem;margin:0} .side a{display:inline-flex;align-items:center;max-width:100%;padding:.5rem .65rem} .main{padding:1rem} .tpcb-lang-switch{position:relative;top:auto;right:auto;left:auto;margin:.5rem auto;justify-content:center;width:max-content} .tpcb-account-nav{position:relative;top:auto;left:auto;max-width:100%;margin:.5rem} } @media(max-width:480px){ .main{padding:.65rem} .box,.card{padding:.85rem;margin:.5rem 0} .top{align-items:stretch} .top>*{width:100%} .tpcb-lang-switch{width:calc(100% - 1rem);max-width:calc(100% - 1rem)} .tpcb-lang-switch select{max-width:65vw} } /* ── Sidebar unread badges (Inbox / Support) ─────────────────────── */ .side-badge{display:inline-block;background:#dc2626;color:#fff;border-radius:999px;padding:0 7px;font-size:.7rem;font-weight:700;line-height:18px;min-width:18px;text-align:center;margin-left:.35rem;vertical-align:middle;box-shadow:0 0 0 2px rgba(255,255,255,.15)} /* ── Clickable inbox items ───────────────────────────────────────── */ .inbox-item-form{margin:0} .inbox-item-btn{display:block;width:100%;text-align:left;border:none;border-left:5px solid #dc2626;cursor:pointer;font:inherit;color:inherit;position:relative;transition:background .15s,box-shadow .15s,transform .05s} .inbox-item-btn:hover{background:#e0ecff;box-shadow:0 6px 18px rgba(37,99,235,.18)} .inbox-item-btn:active{transform:translateY(1px)} .inbox-item-btn .inbox-cta{display:block;margin-top:.45rem;font-size:.72rem;font-weight:700;color:#2563eb;text-transform:uppercase;letter-spacing:.03em} /* ── Floating inline chat widget ─────────────────────────────────── */ .chat-widget{position:fixed;right:18px;bottom:18px;z-index:9999} .chat-widget .chat-launcher{position:relative;right:auto;bottom:auto} html[dir="rtl"] .chat-widget{right:auto;left:18px} .chat-panel{position:absolute;bottom:calc(100% + 12px);right:0;width:360px;max-width:calc(100vw - 32px);height:460px;max-height:calc(100vh - 110px);background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(15,23,42,.28);display:none;flex-direction:column;overflow:hidden;border:1px solid rgba(15,23,42,.08);pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .16s ease,transform .16s ease} html[dir="rtl"] .chat-panel{right:auto;left:0} .chat-panel.is-open{display:flex;pointer-events:auto;opacity:1;transform:translateY(0);animation:cwPop .16s ease-out} @keyframes cwPop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .chat-panel-head{display:flex;align-items:center;justify-content:space-between;padding:.7rem .9rem;background:#0d6efd;color:#fff} .chat-panel-title{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem} .chat-panel-actions{display:flex;align-items:center;gap:.25rem} .chat-panel-actions a,.chat-panel-actions button{color:#fff;background:transparent;border:none;cursor:pointer;font-size:1.15rem;line-height:1;padding:.2rem .4rem;border-radius:8px;text-decoration:none} .chat-panel-actions a:hover,.chat-panel-actions button:hover{background:rgba(255,255,255,.2)} .chat-panel-body{flex:1;overflow-y:auto;padding:.9rem;background:#f6f8fc;display:flex;flex-direction:column;gap:.55rem} .chat-panel-loading,.chat-panel-empty{color:#64748b;font-size:.85rem;text-align:center;margin:auto;padding:1rem;line-height:1.5} .cw-msg{display:flex;flex-direction:column;max-width:84%} .cw-msg .cw-who{font-size:.68rem;font-weight:700;color:#94a3b8;margin-bottom:.15rem} .cw-msg .cw-bubble{padding:.5rem .7rem;border-radius:12px;font-size:.86rem;line-height:1.4;word-wrap:break-word} .cw-mine{align-self:flex-end;align-items:flex-end} .cw-mine .cw-bubble{background:#0d6efd;color:#fff;border-bottom-right-radius:4px} .cw-staff{align-self:flex-start} .cw-staff .cw-bubble{background:#fff;color:#0f172a;border:1px solid #e2e8f0;border-bottom-left-radius:4px} .cw-bot{align-self:flex-start} .cw-bot .cw-bubble{background:#eef2ff;color:#1e293b;border:1px solid #c7d2fe;border-bottom-left-radius:4px} .chat-panel-form{display:flex;gap:.5rem;padding:.65rem;border-top:1px solid #e2e8f0;background:#fff} .chat-panel-form input{flex:1;border:1px solid #cbd5e1;border-radius:999px;padding:.55rem .9rem;font-size:.88rem;outline:none} .chat-panel-form input:focus{border-color:#0d6efd;box-shadow:0 0 0 3px rgba(13,110,253,.15)} .chat-panel-send{background:#0d6efd;color:#fff;border:none;border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:1.1rem;flex:0 0 auto} .chat-panel-send:hover{background:#0b5ed7} @media(max-width:700px){.chat-panel{width:calc(100vw - 24px);height:min(70vh,460px)}} /* ── Cross-role pop-up notifications (toast + chime) ───────────────── */ .tpcb-toast-host{position:fixed;top:16px;right:16px;z-index:2147483000;display:flex;flex-direction:column;gap:10px;max-width:360px;pointer-events:none} .tpcb-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;background:#0f172a;color:#f8fafc;border:1px solid rgba(148,163,184,.35);border-left:4px solid #0d6efd;border-radius:12px;padding:12px 14px;box-shadow:0 12px 32px rgba(2,6,23,.45);font-size:.9rem;line-height:1.35;opacity:0;transform:translateX(24px);transition:opacity .3s ease,transform .3s ease} .tpcb-toast.is-in{opacity:1;transform:translateX(0)} .tpcb-toast.is-out{opacity:0;transform:translateX(24px)} .tpcb-toast-ico{font-size:1.1rem;line-height:1.2;flex:0 0 auto} .tpcb-toast-msg{flex:1 1 auto;word-break:break-word} .tpcb-toast-x{flex:0 0 auto;background:transparent;border:none;color:#94a3b8;font-size:1.1rem;line-height:1;cursor:pointer;padding:0 2px} .tpcb-toast-x:hover{color:#f8fafc} @media(max-width:700px){.tpcb-toast-host{left:12px;right:12px;top:12px;max-width:none}} /* ── Universal dropdown / option legibility ──────────────────────── Native