/* ===== Themes: light (default v3) + dark blue. html[data-theme] set from Mandhari (dark | light | system) ===== */
html[data-theme="dark"]{
  --bg:#071426;--bg-2:#0b1d36;--card:#0e2442;--card-2:#12305a;--txt:#e6eef8;--muted:#9fb2cc;
  --gold:#2bb5bf;--gold-2:#1f9aa3;--blue:#2bb5bf;--green:#34d399;--red:#f87171;--orange:#fbbf24;
  --navy:#041022;--navy-2:#0a1f3d;--teal-soft:rgba(43,181,191,.14);--border:rgba(159,178,204,.16);
  --shadow:0 4px 18px rgba(0,0,0,.35);color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"] body{background:var(--bg)!important;color:var(--txt)}
html[data-theme="dark"] .balance-card,html[data-theme="dark"] .action-grid,html[data-theme="dark"] .section,
html[data-theme="dark"] .dhana-card,html[data-theme="dark"] .profile-dropdown,html[data-theme="dark"] .modal-content{background:var(--card)!important;color:var(--txt)!important;border-color:var(--border)!important}
html[data-theme="dark"] .amount,html[data-theme="dark"] .currency,html[data-theme="dark"] .section-title,
html[data-theme="dark"] .see-all,html[data-theme="dark"] .action-btn span,html[data-theme="dark"] .action-icon,
html[data-theme="dark"] .balance-label,html[data-theme="dark"] .balance-side{color:var(--txt)!important}
html[data-theme="dark"] .bal-btn{background:var(--card-2);color:var(--txt);border-color:var(--border)}
html[data-theme="dark"] .bal-btn b{background:var(--gold)}
html[data-theme="dark"] .bal-btn.primary{background:var(--gold);color:#fff}
html[data-theme="dark"] .bal-btn.primary b{background:#fff;color:var(--gold)}
html[data-theme="dark"] .form-group input,html[data-theme="dark"] .form-group select,html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .option-content,html[data-theme="dark"] .wd-selected,html[data-theme="dark"] .method-tab,html[data-theme="dark"] .btn-outline{background:var(--card-2)!important;color:var(--txt)!important;border-color:var(--border)!important}
html[data-theme="dark"] .left img{background:var(--card-2)}
html[data-theme="dark"] .transaction-icon{background:rgba(248,113,113,.15)}
html[data-theme="dark"] .transaction-icon.deposit,html[data-theme="dark"] .status.completed{background:rgba(52,211,153,.15)}
html[data-theme="dark"] .status{background:rgba(251,191,36,.15)}
html[data-theme="dark"] .verify-banner{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.35);color:var(--txt)}
html[data-theme="dark"] .dhana-dots .dot{background:rgba(255,255,255,.25)}
html[data-theme="dark"] .org-logo{background:#e6eef8}
html[data-theme="dark"] .loading-screen{background:var(--navy)}
html[data-theme="dark"] #loginPage .auth-form{background:var(--card);color:var(--txt)}

/* Map legacy styles.css variables to the active theme */
html[data-theme]{--bg-primary:var(--bg);--bg-secondary:var(--bg-2);--bg-card:var(--card);--bg-card-hover:var(--card-2);
 --text-primary:var(--txt);--text-secondary:var(--muted);--text-muted:var(--muted);--accent-primary:var(--green);--border-color:var(--border)}
/* Balance always readable */
.balance-amount .amount,.amount{color:var(--txt)!important}
.balance-amount .currency{color:var(--txt)!important}
.balance-usd,.balance-usd .amount-small,.balance-usd .currency-small{color:var(--green)}

/* Dark blue everywhere */
html[data-theme="dark"],html[data-theme="dark"] .page,html[data-theme="dark"] .dashboard-main{background:var(--bg)}
html[data-theme="dark"] #loginPage .auth-container{background:linear-gradient(180deg,var(--navy) 0 45%,var(--bg) 45%)!important}
html[data-theme="dark"] .auth-form,html[data-theme="dark"] .card,html[data-theme="dark"] .transaction-list,
html[data-theme="dark"] .members-more button,html[data-theme="dark"] .alert-box,html[data-theme="dark"] .alert-content,
html[data-theme="dark"] [class*="modal"] .modal-body,html[data-theme="dark"] .wd-step-hint,html[data-theme="dark"] .payment-option{background-color:transparent;color:var(--txt)}
html[data-theme="dark"] .auth-form,html[data-theme="dark"] .alert-content,html[data-theme="dark"] .alert-box{background:var(--card)!important;border-color:var(--border)!important}
html[data-theme="dark"] .wd-step-hint{background:var(--teal-soft)!important;border-color:var(--border)!important}
html[data-theme="dark"] label,html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4,
html[data-theme="dark"] .option-name,html[data-theme="dark"] .transaction-title,html[data-theme="dark"] .name{color:var(--txt)}
html[data-theme="dark"] .option-sub,html[data-theme="dark"] p{color:var(--muted)}
html[data-theme="dark"] .compliant{background:rgba(52,211,153,.14)}
html[data-theme="dark"] .balance-side svg{color:var(--muted)}
html[data-theme="dark"] .action-btn:hover{background:var(--teal-soft)}
html[data-theme="dark"] .bottom-nav{background:var(--navy);border-top:1px solid var(--border)}
html[data-theme="dark"] .dashboard-header{background:var(--navy)}
html[data-theme="dark"] .profile-dropdown .profile-details h3{color:var(--txt)}
html[data-theme="dark"] .x-head,html[data-theme="dark"] .x-sheet{background:var(--card)}
html[data-theme="dark"] input::placeholder{color:var(--muted)}

/* Account status badge */
.compliant.verified{background:rgba(22,163,74,.14)!important;color:var(--green)!important}
.compliant.pending{background:rgba(217,119,6,.14)!important;color:var(--orange)!important}

/* Theme switch */
.theme-switch{margin:14px 0 10px;padding-top:12px;border-top:1px solid var(--border)}
.ts-label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:8px}
.ts-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.ts-opts button{padding:8px 4px;border-radius:8px;border:1px solid var(--border);background:var(--card-2);color:var(--txt);font:600 12px inherit;font-family:inherit;cursor:pointer}
.ts-opts button.active{background:var(--gold);border-color:var(--gold);color:#fff}

/* Shared modal */
.x-modal{position:fixed;inset:0;background:rgba(4,12,26,.6);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:flex-end;justify-content:center}
.x-sheet{background:var(--card);color:var(--txt);width:100%;max-width:520px;max-height:90vh;overflow:auto;border-radius:18px 18px 0 0;border:1px solid var(--border);animation:xUp .25s ease}
.x-sheet.wide{max-width:900px}
@media(min-width:640px){.x-modal{align-items:center}.x-sheet{border-radius:18px}}
@keyframes xUp{from{transform:translateY(30px);opacity:0}}
.x-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card);z-index:1}
.x-head h2{margin:0;font-size:18px}
.x-close{background:none;border:0;font-size:28px;line-height:1;color:var(--muted);cursor:pointer}
.x-body{padding:16px 18px 22px}
.v-state{padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:600;margin-bottom:14px}
.v-state.ok{background:rgba(22,163,74,.14);color:var(--green)}
.v-state.no{background:rgba(217,119,6,.14);color:var(--orange)}
.v-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:12px}
.v-steps li{counter-increment:s;display:grid;grid-template-columns:32px 1fr;column-gap:12px}
.v-steps li::before{content:counter(s);grid-row:1/3;width:32px;height:32px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;font-weight:700}
.v-steps b{font-size:14.5px}
.v-steps span{font-size:13px;color:var(--muted);line-height:1.5}
.v-cta{display:block;margin-top:18px;text-align:center;padding:13px;border-radius:10px;background:var(--gold);color:#fff;font-weight:700}
#seeMoreMembers svg{width:14px;height:14px;margin-right:6px;vertical-align:-2px}
.v-paynote{margin:0 0 16px;padding:14px;border-radius:12px;background:var(--card-2);border:1px solid var(--border)}
.v-paynote p{margin:0 0 8px;font-size:13px;line-height:1.55;color:var(--txt)}
.v-paynote p:last-child{margin-bottom:0}
.v-paynote b{color:var(--gold)}
.v-pay-total{font-weight:700}
.v-pay-box{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--teal-soft)}
.v-pay-box ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.v-pay-box li{font-size:13px;color:var(--txt)}
.v-pay-box b{color:var(--gold)}

/* Gallery */
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.g-item{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1;cursor:pointer;border:1px solid var(--border);background:var(--card-2);padding:0}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.g-item:hover img{transform:scale(1.06)}
.g-item span{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 7px;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75));text-align:left}
.x-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:1100;display:flex;align-items:center;justify-content:center}
.x-lightbox figure{margin:0;max-width:92vw;text-align:center;color:#fff}
.x-lightbox img{max-height:75vh;max-width:92vw;margin:0 auto;border-radius:10px}
.x-lightbox figcaption{margin-top:10px;display:grid;gap:4px}
.x-lightbox figcaption span{color:#cbd5e1;font-size:13px}
.lb-close{position:absolute;top:12px;right:16px;color:#fff}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:28px;cursor:pointer}
.lb-nav.prev{left:10px}.lb-nav.next{right:10px}