/* ============================================================
   QFS Global Ledger — app.css
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
:root{
  --ff:'Sora',sans-serif; --fm:'DM Mono',monospace;
  --bg0:#0a0b0f; --bg1:#12141a; --bg2:#1a1d26; --bg3:#222636;
  --acc:#4ade80; --acc2:#22d3ee; --txt:#e8eaf0; --txt2:#8b90a0;
  --red:#f87171; --border:#2a2e3d; --purple:#a78bfa; --amber:#fbbf24;
}
body.light{
  --bg0:#f4f5f8; --bg1:#ffffff; --bg2:#eef0f4; --bg3:#e3e6ee;
  --txt:#10131a; --txt2:#6b7180; --border:#e2e5ee;
  --acc:#16a34a; --acc2:#0891b2; --red:#dc2626; --purple:#7c3aed; --amber:#d97706;
}
body{background:var(--bg0);color:var(--txt);font-family:var(--ff);font-size:14px;line-height:1.5;display:flex;justify-content:center;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}

.app{width:100%;max-width:480px;min-height:100vh;background:var(--bg0);position:relative;overflow-x:hidden;transition:background .3s}
.page{display:flex;flex-direction:column;min-height:100vh;padding-bottom:90px;animation:fadeIn .22s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:clamp(14px,4vw,22px) clamp(14px,4vw,20px) 12px;position:sticky;top:0;background:var(--bg0);z-index:60;transition:background .3s}
.top-left p{font-size:11px;color:var(--txt2);font-family:var(--fm);letter-spacing:.06em}
.top-left h1{font-size:clamp(18px,5vw,22px);font-weight:600;color:var(--txt)}
.top-right-row{display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--acc);overflow:hidden;cursor:pointer;flex-shrink:0}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.icon-btn{width:38px;height:38px;border-radius:50%;background:var(--bg2);border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt2);font-size:16px;transition:background .2s,color .2s}
.icon-btn:hover{background:var(--bg3);color:var(--txt)}
.theme-toggle i{transition:transform .4s}
.theme-toggle:active i{transform:rotate(180deg)}

/* Profile dropdown */
.profile-wrap{position:relative}
.profile-menu{position:absolute;top:46px;right:0;width:240px;background:var(--bg1);border:0.5px solid var(--border);border-radius:18px;padding:8px;z-index:1000;box-shadow:0 18px 50px -12px rgba(0,0,0,.55);transform:scale(.92) translateY(-6px);opacity:0;pointer-events:none;transform-origin:top right;transition:transform .18s,opacity .18s}
body.light .profile-menu{box-shadow:0 18px 50px -14px rgba(20,30,60,.28)}
.profile-menu.open{transform:none;opacity:1;pointer-events:auto}
.profile-head{display:flex;align-items:center;gap:11px;padding:10px 10px 12px;border-bottom:0.5px solid var(--border);margin-bottom:6px}
.profile-head .pm-avatar{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--acc);overflow:hidden;flex-shrink:0;background:var(--bg3)}
.profile-head .pm-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.profile-head .pm-name{font-size:13px;font-weight:600}
.profile-head .pm-mail{font-size:11px;color:var(--txt2);font-family:var(--fm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:155px}
.menu-item{display:flex;align-items:center;gap:11px;padding:11px 10px;border-radius:11px;cursor:pointer;font-size:13px;transition:background .15s}
.menu-item:hover{background:var(--bg2)}
.menu-item i{font-size:18px;color:var(--txt2);width:20px;text-align:center}
.menu-item.danger,.menu-item.danger i{color:var(--red)}

/* Balance card */
.balance-card{margin:0 clamp(12px,4vw,16px) 18px;background:var(--bg1);border:0.5px solid var(--border);border-radius:20px;padding:clamp(16px,4vw,22px);position:relative;overflow:hidden}
.balance-card::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(74,222,128,.08) 0%,transparent 70%)}
.bal-label{font-size:11px;color:var(--txt2);font-family:var(--fm);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.bal-amount{font-size:clamp(28px,8vw,36px);font-weight:600;line-height:1;margin-bottom:10px;font-family:var(--fm)}
.bal-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(74,222,128,.12);border:0.5px solid rgba(74,222,128,.3);border-radius:20px;padding:2px 10px;font-size:11px;color:var(--acc);font-family:var(--fm)}
.bal-dot{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.bal-stats{display:flex;gap:20px;margin-top:14px;padding-top:14px;border-top:0.5px solid var(--border)}
.bal-stat p{font-size:10px;color:var(--txt2);font-family:var(--fm);margin-bottom:2px}
.bal-stat span{font-size:13px;font-family:var(--fm);font-weight:500}

/* Action buttons */
.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 clamp(12px,4vw,16px) 18px}
.action-btn{background:var(--bg2);border:0.5px solid var(--border);border-radius:14px;padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;transition:background .2s,border-color .2s}
.action-btn:hover{background:var(--bg3);border-color:var(--acc)}
.action-icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px}
.action-btn span{font-size:10px;color:var(--txt2);font-family:var(--fm)}
.ai-send .action-icon{background:rgba(74,222,128,.12);color:var(--acc)}
.ai-receive .action-icon{background:rgba(248,113,113,.12);color:var(--red)}
.ai-buy .action-icon{background:rgba(34,211,238,.12);color:var(--acc2)}
.ai-stake .action-icon{background:rgba(167,139,250,.12);color:var(--purple)}

/* Section head */
.section-head{padding:0 clamp(12px,4vw,16px) 10px;display:flex;align-items:center;justify-content:space-between}
.section-head h3{font-size:12px;font-weight:500;color:var(--txt2);font-family:var(--fm);letter-spacing:.07em;text-transform:uppercase}
.section-head a{font-size:11px;color:var(--acc);cursor:pointer;font-family:var(--fm)}

/* Asset / tx rows */
.asset-list,.tx-list,.card-info-list{margin:0 clamp(12px,4vw,16px);display:flex;flex-direction:column;gap:2px}
.asset-row,.tx-row{background:var(--bg1);border:0.5px solid var(--border);border-radius:14px;padding:13px 14px;display:flex;align-items:center;gap:11px;cursor:pointer;transition:background .15s}
.asset-row:hover,.tx-row:hover{background:var(--bg2)}
.coin-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;font-family:var(--fm);flex-shrink:0}
.coin-name{font-size:13px;font-weight:500}
.coin-ticker{font-size:11px;color:var(--txt2);font-family:var(--fm)}
.coin-price{text-align:right}
.coin-usd{font-size:13px;font-weight:500;font-family:var(--fm)}
.coin-change{font-size:11px;font-family:var(--fm)}
.up{color:var(--acc)}.down{color:var(--red)}.flat{color:var(--txt2)}
.mini-chart{width:46px;height:22px;flex-shrink:0}

/* Bottom nav */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:var(--bg1);border-top:0.5px solid var(--border);display:flex;padding:10px 0 max(16px,env(safe-area-inset-bottom));z-index:20;transition:background .3s}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;color:var(--txt2);font-size:10px;font-family:var(--fm);transition:color .2s;padding:4px 0}
.nav-item.active{color:var(--acc)}
.nav-item i{font-size:19px}
.nav-center-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;font-size:10px;font-family:var(--fm);color:var(--txt2)}
.nav-center{width:48px;height:48px;background:var(--acc);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:-18px;border:3px solid var(--bg0)}
.nav-center i{font-size:20px;color:#000}
body.light .nav-center i{color:#fff}

/* Forms / buttons */
.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:10px;color:var(--txt2);font-family:var(--fm);letter-spacing:.07em;margin-bottom:5px;text-transform:uppercase}
.form-group select,.form-group input{width:100%;background:var(--bg2);border:0.5px solid var(--border);border-radius:11px;padding:11px 13px;color:var(--txt);font-family:var(--fm);font-size:13px;outline:none;-webkit-appearance:none;appearance:none}
.form-group select:focus,.form-group input:focus{border-color:var(--acc)}
.btn-primary{width:100%;padding:13px;background:var(--acc);color:#000;border:none;border-radius:13px;font-size:14px;font-weight:600;font-family:var(--ff);cursor:pointer;margin-top:6px;transition:opacity .2s}
body.light .btn-primary{color:#fff}
.btn-primary:hover{opacity:.85}
.btn-danger{background:var(--red);color:#fff}
.btn-swap{background:var(--acc2);color:#000}
.btn-ghost{background:var(--bg2);border:0.5px solid var(--border);color:var(--txt)}

/* Sheet (used for send/receive/swap/wallet via <details> or pages) */
.sheet{margin:0 clamp(12px,4vw,16px) 16px;background:var(--bg1);border:0.5px solid var(--border);border-radius:18px;padding:18px}
.sheet h3{font-size:15px;font-weight:600;margin-bottom:14px}

/* Transactions page */
.filter-row{display:flex;gap:8px;padding:0 clamp(12px,4vw,16px) 14px;overflow-x:auto;scrollbar-width:none}
.filter-row::-webkit-scrollbar{display:none}
.filter-chip{flex-shrink:0;padding:6px 14px;border-radius:20px;font-size:12px;font-family:var(--fm);border:0.5px solid var(--border);background:var(--bg2);color:var(--txt2);cursor:pointer;transition:all .2s;white-space:nowrap}
.filter-chip.active{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.4);color:var(--acc)}
.tx-group-label{padding:6px clamp(12px,4vw,16px);font-size:11px;color:var(--txt2);font-family:var(--fm);letter-spacing:.07em;text-transform:uppercase}
.tx-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.tx-icon.send{background:rgba(248,113,113,.12);color:var(--red)}
.tx-icon.receive{background:rgba(74,222,128,.12);color:var(--acc)}
.tx-icon.swap{background:rgba(34,211,238,.12);color:var(--acc2)}
.tx-icon.buy,.tx-icon.stake{background:rgba(167,139,250,.12);color:var(--purple)}
.tx-name{font-size:13px;font-weight:500}
.tx-detail{font-size:11px;color:var(--txt2);font-family:var(--fm)}
.tx-amt{text-align:right}
.tx-amt-val{font-size:13px;font-weight:500;font-family:var(--fm)}
.tx-status{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:10px;font-size:10px;font-family:var(--fm)}
.tx-status.completed{background:rgba(74,222,128,.1);color:var(--acc)}
.tx-status.pending{background:rgba(251,191,36,.1);color:var(--amber)}
.tx-status.failed{background:rgba(248,113,113,.1);color:var(--red)}
.tx-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 clamp(12px,4vw,16px) 16px}
.tx-stat-card{background:var(--bg1);border:0.5px solid var(--border);border-radius:14px;padding:14px}
.tx-stat-card p{font-size:10px;color:var(--txt2);font-family:var(--fm);text-transform:uppercase;margin-bottom:4px}
.tx-stat-card span{font-size:18px;font-weight:600;font-family:var(--fm)}
.search-wrap{padding:0 clamp(12px,4vw,16px) 12px;position:relative}
.search-wrap i{position:absolute;left:calc(clamp(12px,4vw,16px) + 12px);top:50%;transform:translateY(-50%);color:var(--txt2);font-size:16px}
.search-input{width:100%;background:var(--bg2);border:0.5px solid var(--border);border-radius:12px;padding:10px 12px 10px 38px;color:var(--txt);font-family:var(--fm);font-size:13px;outline:none}

/* Card page */
.credit-card{margin:0 clamp(12px,4vw,16px) 20px;border-radius:22px;padding:clamp(18px,5vw,26px);position:relative;overflow:hidden;min-height:190px;background:linear-gradient(135deg,#0f1923 0%,#142030 50%,#0d2235 100%);border:0.5px solid rgba(34,211,238,.2)}
.card-chip{width:36px;height:28px;border-radius:6px;background:linear-gradient(135deg,var(--amber),#f59e0b);margin-bottom:18px}
.card-number{font-family:var(--fm);font-size:clamp(13px,3.5vw,16px);letter-spacing:.18em;color:rgba(255,255,255,.9);margin-bottom:18px}
.card-bottom{display:flex;justify-content:space-between;align-items:flex-end}
.card-label{font-size:9px;color:rgba(255,255,255,.45);font-family:var(--fm);letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.card-value{font-size:13px;font-weight:500;color:rgba(255,255,255,.9);font-family:var(--fm)}
.card-circle{width:28px;height:28px;border-radius:50%}
.card-circle:last-child{margin-left:-10px;opacity:.85}
.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 clamp(12px,4vw,16px) 18px}
.card-action{background:var(--bg2);border:0.5px solid var(--border);border-radius:14px;padding:14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:background .2s}
.card-action:hover{background:var(--bg3)}
.card-action-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.card-action-text p{font-size:12px;font-weight:500}
.card-action-text span{font-size:10px;color:var(--txt2);font-family:var(--fm)}
.card-info-row{background:var(--bg1);border:0.5px solid var(--border);border-radius:14px;padding:14px;display:flex;align-items:center;justify-content:space-between}
.card-info-row p{font-size:12px;color:var(--txt2)}
.card-info-row span{font-size:13px;font-weight:500;font-family:var(--fm)}
.card-toggle{width:40px;height:22px;border-radius:11px;background:var(--bg3);border:0.5px solid var(--border);position:relative;cursor:pointer;transition:background .3s;flex-shrink:0}
.card-toggle.on{background:rgba(74,222,128,.25);border-color:rgba(74,222,128,.4)}
.card-toggle-knob{width:16px;height:16px;border-radius:50%;background:var(--txt2);position:absolute;top:2px;left:3px;transition:transform .3s,background .3s}
.card-toggle.on .card-toggle-knob{transform:translateX(18px);background:var(--acc)}
.order-card-panel{margin:0 clamp(12px,4vw,16px);background:var(--bg1);border:0.5px solid var(--border);border-radius:18px;padding:20px;text-align:center}
.order-card-panel i{font-size:40px;color:var(--acc2);margin-bottom:12px;display:block}
.order-card-panel h3{font-size:16px;font-weight:600;margin-bottom:6px}
.order-card-panel p{font-size:13px;color:var(--txt2);margin-bottom:16px}

/* Profile page */
.profile-hero{margin:0 clamp(12px,4vw,16px) 18px;background:var(--bg1);border:0.5px solid var(--border);border-radius:20px;padding:22px;display:flex;flex-direction:column;align-items:center;text-align:center}
.profile-hero .ph-avatar{width:80px;height:80px;border-radius:50%;border:2px solid var(--acc);overflow:hidden;background:var(--bg3);margin-bottom:12px}
.profile-hero .ph-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.profile-hero h2{font-size:18px;font-weight:600}
.profile-hero p{font-size:12px;color:var(--txt2);font-family:var(--fm);margin-top:2px}
.profile-hero .ph-badge{margin-top:10px}

/* Flash */
.flash{margin:0 clamp(12px,4vw,16px) 14px;padding:11px 14px;border-radius:12px;font-size:12px;font-family:var(--fm);border:0.5px solid}
.flash.ok{background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.35);color:var(--acc)}
.flash.err{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.35);color:var(--red)}

/* ===== Transaction detail ===== */
.tx-hero{margin:0 clamp(12px,4vw,16px) 16px;background:var(--bg1);border:0.5px solid var(--border);border-radius:20px;padding:24px 18px;display:flex;flex-direction:column;align-items:center;text-align:center}
.tx-hero .tx-icon{width:56px;height:56px;font-size:24px;margin-bottom:12px}
.tx-hero .th-amt{font-size:30px;font-weight:600;font-family:var(--fm);line-height:1}
.tx-hero .th-sub{font-size:12px;color:var(--txt2);font-family:var(--fm);margin-top:6px}
.tx-hero .th-status{margin-top:12px}
.copy-row{cursor:pointer}
.copy-row .mono-ellip{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}

/* ===== KYC ===== */
.avatar-edit{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.avatar-edit .ae-pic{width:64px;height:64px;border-radius:50%;border:1.5px solid var(--acc);overflow:hidden;flex-shrink:0;background:var(--bg3)}
.avatar-edit .ae-pic img{width:100%;height:100%;object-fit:cover;display:block}
.kyc-status{margin:0 clamp(12px,4vw,16px) 16px;border-radius:16px;padding:18px;border:0.5px solid;display:flex;gap:13px;align-items:flex-start}
.kyc-status i{font-size:24px;flex-shrink:0;margin-top:1px}
.kyc-status h3{font-size:15px;font-weight:600;margin-bottom:3px}
.kyc-status p{font-size:12px;color:var(--txt2);font-family:var(--fm);line-height:1.6}
.kyc-status.verified{background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.35)}
.kyc-status.verified i,.kyc-status.verified h3{color:var(--acc)}
.kyc-status.pending{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.35)}
.kyc-status.pending i,.kyc-status.pending h3{color:var(--amber)}
.kyc-status.rejected{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.35)}
.kyc-status.rejected i,.kyc-status.rejected h3{color:var(--red)}
.kyc-banner{margin:0 clamp(12px,4vw,16px) 14px;background:var(--bg1);border:0.5px solid rgba(251,191,36,.4);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:11px;cursor:pointer}
.kyc-banner i{color:var(--amber);font-size:20px}
.kyc-banner .kb-txt{flex:1}
.kyc-banner .kb-txt p{font-size:12px;font-weight:500}
.kyc-banner .kb-txt span{font-size:11px;color:var(--txt2);font-family:var(--fm)}
.file-input{display:block;width:100%;background:var(--bg2);border:1px dashed var(--border);border-radius:11px;padding:14px;color:var(--txt2);font-family:var(--fm);font-size:12px;cursor:pointer}
.file-input::-webkit-file-upload-button{background:var(--bg3);color:var(--txt);border:0;border-radius:8px;padding:6px 10px;margin-right:10px;font-family:var(--fm);cursor:pointer}

/* ===== AUTH pages ===== */
.auth{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:24px clamp(18px,6vw,28px)}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.auth-logo .mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--acc),var(--acc2));display:flex;align-items:center;justify-content:center;font-weight:700;color:#04130c;font-family:var(--fm)}
.auth-logo b{font-size:16px;letter-spacing:.02em}
.auth h1{font-size:26px;font-weight:600;margin:18px 0 4px}
.auth .sub{font-size:13px;color:var(--txt2);margin-bottom:22px}
.auth .alt{margin-top:18px;font-size:12px;color:var(--txt2);text-align:center}
.auth .alt a{color:var(--acc)}
.demo-note{margin-top:18px;background:var(--bg1);border:0.5px solid var(--border);border-radius:12px;padding:12px 14px;font-size:11px;font-family:var(--fm);color:var(--txt2);line-height:1.7}
.demo-note b{color:var(--txt)}

@media(max-width:320px){
  .actions{gap:5px}.action-icon{width:34px;height:34px;font-size:15px}.action-btn span{font-size:9px}
}