/* ═══════════════════════════════════════════
   WF DApp — 区块链社交钱包
   设计规范：珍珠白底 + 靛蓝主色 + 香槟金点缀
   移动优先响应式布局
   ═══════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
a{text-decoration:none;color:inherit;}
button{border:none;outline:none;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;}
input,textarea{font-family:inherit;outline:none;}
ul,li{list-style:none;}

:root{
  --bg-primary:#F5F6FA;
  --bg-secondary:#FFFFFF;
  --bg-tertiary:#EEF0F6;
  --bg-card:#FFFFFF;
  --bg-hover:#F0F2F8;
  --accent:#4658C9;
  --accent-light:#6B7DE8;
  --accent-dark:#2E3F9E;
  --gold:#C8A867;
  --gold-light:#DDB87A;
  --blue:#3B82F6;
  --green:#22C55E;
  --red:#EF4444;
  --yellow:#EAB308;
  --text-primary:#1A1F36;
  --text-secondary:#6B7088;
  --text-tertiary:#A0A5BC;
  --border:rgba(20,30,60,0.07);
  --border-hover:rgba(20,30,60,0.14);
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow:0 2px 12px rgba(20,30,60,0.06);
  --shadow-md:0 4px 20px rgba(20,30,60,0.08);
  --shadow-lg:0 8px 40px rgba(20,30,60,0.10);
  --transition:all .3s ease;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --sidebar-w:0px;
}

html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}

body{
  font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.6;
  overflow:hidden;
  height:100vh;
  height:100dvh;
  width:100vw;
  margin:0;
  padding:0;
}

/* ═══ APP LAYOUT ═══ */
#app{
  display:flex;
  height:100vh;
  height:100dvh;
  width:100%;
}

/* ── Sidebar (桌面侧边栏) ── */
.sidebar{
  width:76px;
  background:var(--bg-secondary);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px 0;
  gap:8px;
  flex-shrink:0;
}
.sidebar-logo{
  width:48px;height:48px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  box-shadow:0 4px 14px rgba(70,88,201,0.3);
}
.sidebar-logo svg{width:30px;height:30px;}
.nav-item{
  width:48px;height:48px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:var(--transition);
  color:var(--text-tertiary);
  font-size:20px;
  position:relative;
}
.nav-item:hover{background:var(--bg-hover);color:var(--text-secondary);}
.nav-item.active{background:rgba(70,88,201,0.10);color:var(--accent);}
.nav-item .badge{
  position:absolute;top:6px;right:6px;
  min-width:18px;height:18px;
  border-radius:9px;
  background:var(--red);
  color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;
}
.nav-spacer{flex:1;}
.nav-item.logout:hover{background:rgba(239,68,68,0.10);color:var(--red);}

/* ── Main Content ── */
.main{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-width:0;
  width:100%;
}

/* ── Topbar ── */
.topbar{
  height:56px;
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  padding:0 12px;
  gap:8px;
  flex-shrink:0;
  padding-top:var(--safe-top);
}
.topbar-title{font-size:17px;font-weight:700;color:var(--text-primary);white-space:nowrap;}
.topbar-spacer{flex:1;}
.topbar-status{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--text-secondary);
}
.status-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 8px rgba(34,197,94,0.5);
}
.status-dot.offline{background:var(--text-tertiary);box-shadow:none;}
.topbar-btn{
  padding:7px 12px;border-radius:var(--radius-sm);
  background:var(--bg-tertiary);color:var(--text-primary);
  font-size:12px;font-weight:500;
  display:flex;align-items:center;gap:4px;
  transition:var(--transition);
  white-space:nowrap;
}
.topbar-btn:hover{background:var(--bg-hover);}
.topbar-btn.primary{background:var(--accent);color:#fff;box-shadow:0 2px 10px rgba(70,88,201,0.3);}
.topbar-btn.primary:hover{background:var(--accent-light);}

/* ── Content Area ── */
.content{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:12px;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(70px + var(--safe-bottom));
}
.content::-webkit-scrollbar{width:0px;display:none;}

/* ── Page (hidden by default) ── */
.page{display:none;height:100%;}
.page.active{display:block;}

/* ═══ WALLET PAGE ═══ */
.wallet-hero{
  background:linear-gradient(135deg,#FFFFFF 0%,#F0F3FF 100%);
  border-radius:var(--radius-lg);
  padding:20px;
  margin-bottom:12px;
  border:1px solid var(--border);
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-md);
}
.wallet-hero::before{
  content:'';position:absolute;top:-50%;right:-20%;
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(70,88,201,0.08),transparent 70%);
  border-radius:50%;
}
.wallet-hero::after{
  content:'';position:absolute;bottom:-30%;left:-10%;
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(200,168,103,0.06),transparent 70%);
  border-radius:50%;
}
.wallet-label{font-size:12px;color:var(--text-tertiary);margin-bottom:6px;position:relative;z-index:1;}
.wallet-total{
  font-size:32px;font-weight:900;
  font-family:'JetBrains Mono',monospace;
  margin-bottom:6px;
  color:var(--text-primary);
  position:relative;z-index:1;
  word-break:break-all;
}
.wallet-change{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--green);
  position:relative;z-index:1;
}
.wallet-change.down{color:var(--red);}
.wallet-address{
  margin-top:12px;
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  background:rgba(70,88,201,0.04);
  border-radius:var(--radius-sm);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;color:var(--text-secondary);
  position:relative;z-index:1;
  overflow:hidden;
}
.wallet-address-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
  min-width:0;
}
.wallet-address .copy-btn{
  color:var(--accent);cursor:pointer;font-size:14px;flex-shrink:0;
}

.wallet-actions{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  margin-bottom:12px;
}
.w-action{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 4px;
  text-align:center;
  cursor:pointer;
  transition:var(--transition);
  box-shadow:var(--shadow);
}
.w-action:hover,.w-action:active{background:var(--bg-hover);border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.w-action .icon{font-size:22px;margin-bottom:4px;line-height:1;}
.w-action .label{font-size:11px;font-weight:500;color:var(--text-primary);}

.asset-section{margin-bottom:16px;}
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.section-title{font-size:16px;font-weight:700;color:var(--text-primary);}
.section-link{font-size:12px;color:var(--accent);cursor:pointer;}

.asset-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 14px;
  margin-bottom:8px;
  display:flex;align-items:center;gap:12px;
  transition:var(--transition);
  cursor:pointer;
  box-shadow:var(--shadow);
}
.asset-card:hover,.asset-card:active{background:var(--bg-hover);border-color:var(--border-hover);}
.asset-icon{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;
  flex-shrink:0;
}
.asset-icon.btc{background:rgba(247,147,26,0.12);color:#F7931A;}
.asset-icon.eth{background:rgba(98,126,234,0.12);color:#627EEA;}
.asset-info{flex:1;min-width:0;overflow:hidden;}
.asset-name{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:2px;}
.asset-amount{font-size:12px;color:var(--text-tertiary);font-family:'JetBrains Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.asset-value{text-align:right;flex-shrink:0;}
.asset-value .usd{font-size:14px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--text-primary);}
.asset-value .change{font-size:11px;margin-top:2px;}
.asset-value .change.up{color:var(--green);}
.asset-value .change.down{color:var(--red);}

.tx-list{display:flex;flex-direction:column;gap:6px;}
.tx-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  transition:var(--transition);
  box-shadow:var(--shadow);
}
.tx-item:hover,.tx-item:active{background:var(--bg-hover);}
.tx-icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  flex-shrink:0;
}
.tx-icon.in{background:rgba(34,197,94,0.12);color:var(--green);}
.tx-icon.out{background:rgba(239,68,68,0.12);color:var(--red);}
.tx-info{flex:1;min-width:0;overflow:hidden;}
.tx-title{font-size:13px;font-weight:500;color:var(--text-primary);}
.tx-time{font-size:11px;color:var(--text-tertiary);}
.tx-amount{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:13px;}
.tx-amount.in{color:var(--green);}
.tx-amount.out{color:var(--red);}

/* ═══ CHAT PAGE ═══ */
.chat-layout{
  display:flex;height:100%;gap:0;
}
.chat-list-panel{
  width:260px;
  background:var(--bg-secondary);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
}
.chat-search{
  padding:12px;
  border-bottom:1px solid var(--border);
}
.chat-search input{
  width:100%;
  padding:8px 12px;
  background:var(--bg-tertiary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-size:13px;
}
.chat-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.chat-list::-webkit-scrollbar{width:0px;display:none;}

.chat-item{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  cursor:pointer;
  transition:var(--transition);
  border-bottom:1px solid var(--border);
}
.chat-item:hover,.chat-item:active{background:var(--bg-hover);}
.chat-item.active{background:rgba(70,88,201,0.06);}
.chat-avatar{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;flex-shrink:0;color:#fff;
}
.chat-avatar.a1{background:linear-gradient(135deg,#4658C9,#2E3F9E);}
.chat-avatar.a2{background:linear-gradient(135deg,#3B82F6,#1D4ED8);}
.chat-avatar.a3{background:linear-gradient(135deg,#22C55E,#16A34A);}
.chat-avatar.a4{background:linear-gradient(135deg,#9B6DD7,#7B4FBE);}
.chat-avatar.a5{background:linear-gradient(135deg,#C8A867,#A68540);}
.chat-avatar.group{background:linear-gradient(135deg,#6B7088,#4A4F6E);}
.chat-meta{flex:1;min-width:0;}
.chat-name{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:2px;}
.chat-preview{font-size:12px;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-extra{text-align:right;flex-shrink:0;}
.chat-time{font-size:10px;color:var(--text-tertiary);margin-bottom:4px;}
.chat-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;border-radius:9px;
  background:var(--accent);color:#fff;
  font-size:10px;font-weight:700;padding:0 5px;
}

.chat-window{
  flex:1;display:flex;flex-direction:column;
  background:var(--bg-primary);
  min-width:0;
}
.chat-header{
  height:56px;padding:0 12px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;
  background:var(--bg-secondary);
}
.chat-header .name{font-size:15px;font-weight:600;color:var(--text-primary);}
.chat-header .status{font-size:11px;color:var(--text-tertiary);}
.chat-header-actions{margin-left:auto;display:flex;gap:6px;}
.chat-header-actions .icon-btn{
  width:34px;height:34px;border-radius:10px;
  background:var(--bg-tertiary);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:15px;transition:var(--transition);
}
.chat-header-actions .icon-btn:hover,.chat-header-actions .icon-btn:active{background:var(--bg-hover);}

.chat-messages{
  flex:1;overflow-y:auto;padding:12px;
  display:flex;flex-direction:column;gap:10px;
  -webkit-overflow-scrolling:touch;
}
.chat-messages::-webkit-scrollbar{width:0px;display:none;}

.msg{
  max-width:80%;display:flex;flex-direction:column;gap:4px;
}
.msg.me{align-self:flex-end;align-items:flex-end;}
.msg.them{align-self:flex-start;align-items:flex-start;}

.msg-bubble{
  padding:9px 14px;
  border-radius:16px;
  font-size:14px;
  word-break:break-word;
}
.msg.me .msg-bubble{
  background:var(--accent);color:#fff;
  border-bottom-right-radius:4px;
}
.msg.them .msg-bubble{
  background:var(--bg-secondary);color:var(--text-primary);
  border:1px solid var(--border);
  border-bottom-left-radius:4px;
}
.msg-time{font-size:10px;color:var(--text-tertiary);}

/* 特色消息卡片 */
.msg-card{
  padding:0;border-radius:16px;overflow:hidden;
  min-width:220px;max-width:300px;
  box-shadow:var(--shadow);
}
.msg-card.transfer{
  background:var(--bg-secondary);
  border:1px solid rgba(70,88,201,0.2);
}
.msg-card.redpacket{
  background:var(--bg-secondary);
  border:1px solid rgba(239,68,68,0.2);
}
.msg-card-header{
  padding:10px 14px;
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--border);
}
.msg-card-header .icon{font-size:20px;}
.msg-card-header .title{font-size:13px;font-weight:600;color:var(--text-primary);}
.msg-card-header .subtitle{font-size:11px;color:var(--text-tertiary);}
.msg-card-body{padding:10px 14px;}
.msg-card-body .amount{
  font-size:20px;font-weight:700;
  font-family:'JetBrains Mono',monospace;
  margin-bottom:4px;
  color:var(--text-primary);
}
.msg-card-body .note{font-size:11px;color:var(--text-tertiary);}
.msg-card-footer{
  padding:6px 14px;border-top:1px solid var(--border);
  font-size:11px;color:var(--text-tertiary);
  display:flex;align-items:center;justify-content:space-between;
}
.msg-card-footer .status-badge{
  padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;
}
.status-badge.pending{background:rgba(234,179,8,0.12);color:var(--yellow);}
.status-badge.confirmed{background:rgba(34,197,94,0.12);color:var(--green);}

.msg-card .claim-btn{
  width:100%;padding:8px;
  background:var(--accent);color:#fff;
  font-size:13px;font-weight:600;
  cursor:pointer;border:none;
}

.chat-input-bar{
  padding:10px 12px;
  border-top:1px solid var(--border);
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;
  background:var(--bg-secondary);
  padding-bottom:calc(10px + var(--safe-bottom));
}
.chat-input-bar .icon-btn{
  width:34px;height:34px;border-radius:10px;
  background:var(--bg-tertiary);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:15px;transition:var(--transition);
  flex-shrink:0;
}
.chat-input-bar .icon-btn:hover,.chat-input-bar .icon-btn:active{background:var(--bg-hover);}
.chat-input{
  flex:1;
  padding:8px 12px;
  background:var(--bg-tertiary);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text-primary);
  font-size:13px;
  min-width:0;
}
.chat-send-btn{
  padding:8px 16px;
  background:var(--accent);color:#fff;
  border-radius:var(--radius);font-weight:600;
  cursor:pointer;transition:var(--transition);
  box-shadow:0 2px 10px rgba(70,88,201,0.3);
  font-size:13px;
  flex-shrink:0;
}
.chat-send-btn:hover,.chat-send-btn:active{background:var(--accent-light);}

/* ═══ CONTACTS PAGE ═══ */
.contacts-tabs{
  display:flex;gap:4px;margin-bottom:12px;
  background:var(--bg-secondary);padding:4px;border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.ctab{
  flex:1;padding:8px 4px;text-align:center;
  border-radius:var(--radius-sm);cursor:pointer;
  font-size:13px;font-weight:500;color:var(--text-tertiary);
  transition:var(--transition);
}
.ctab.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(70,88,201,0.3);}
.ctab .count{
  display:inline-block;margin-left:4px;
  padding:1px 6px;border-radius:8px;
  background:var(--bg-hover);font-size:10px;
}
.ctab.active .count{background:rgba(255,255,255,0.2);}

.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.contact-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  display:flex;align-items:center;gap:12px;
  transition:var(--transition);cursor:pointer;
  box-shadow:var(--shadow);
}
.contact-card:hover,.contact-card:active{background:var(--bg-hover);border-color:var(--border-hover);box-shadow:var(--shadow-md);}
.contact-card .info{flex:1;min-width:0;overflow:hidden;}
.contact-card .name{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:2px;}
.contact-card .addr{font-size:11px;color:var(--text-tertiary);font-family:'JetBrains Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.contact-card .actions{display:flex;gap:4px;flex-shrink:0;}
.contact-card .act-btn{
  width:32px;height:32px;border-radius:8px;
  background:var(--bg-tertiary);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;cursor:pointer;transition:var(--transition);
}
.contact-card .act-btn:hover,.contact-card .act-btn:active{background:var(--accent);color:#fff;}

.request-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px;margin-bottom:8px;
  display:flex;align-items:center;gap:12px;
  box-shadow:var(--shadow);
}
.request-card .info{flex:1;min-width:0;}
.request-card .btn-accept{
  padding:6px 14px;border-radius:var(--radius-sm);
  background:var(--green);color:#fff;font-size:12px;font-weight:600;cursor:pointer;
  flex-shrink:0;
}
.request-card .btn-reject{
  padding:6px 14px;border-radius:var(--radius-sm);
  background:var(--bg-tertiary);color:var(--text-secondary);font-size:12px;cursor:pointer;
  flex-shrink:0;
}

/* ═══ DAPP PAGE ═══ */
.dapp-banner{
  background:linear-gradient(135deg,rgba(70,88,201,0.08),rgba(200,168,103,0.06));
  border-radius:var(--radius-lg);padding:20px;margin-bottom:16px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.dapp-banner h2{font-size:18px;margin-bottom:6px;color:var(--text-primary);}
.dapp-banner p{color:var(--text-secondary);font-size:13px;}

.dapp-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
.dapp-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;cursor:pointer;
  transition:var(--transition);
  box-shadow:var(--shadow);
}
.dapp-card:hover,.dapp-card:active{background:var(--bg-hover);transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-md);}
.dapp-card .banner{
  height:80px;display:flex;align-items:center;justify-content:center;font-size:32px;
}
.dapp-card .body{padding:10px 12px;}
.dapp-card .name{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:2px;}
.dapp-card .desc{font-size:11px;color:var(--text-tertiary);margin-bottom:6px;}
.dapp-card .tags{display:flex;gap:4px;flex-wrap:wrap;}
.dapp-card .tag{
  padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;
}
.tag.defi{background:rgba(59,130,246,0.12);color:var(--blue);}
.tag.nft{background:rgba(155,109,215,0.12);color:#9B6DD7;}
.tag.game{background:rgba(34,197,94,0.12);color:var(--green);}
.tag.social{background:rgba(70,88,201,0.12);color:var(--accent);}

/* ═══ PROFILE PAGE ═══ */
.profile-header{
  background:linear-gradient(135deg,#FFFFFF 0%,#F0F3FF 100%);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:20px;
  display:flex;align-items:center;gap:16px;margin-bottom:16px;
  box-shadow:var(--shadow-md);
}
.profile-avatar{
  width:64px;height:64px;border-radius:20px;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:900;color:#fff;
  box-shadow:0 4px 16px rgba(70,88,201,0.3);
  flex-shrink:0;
}
.profile-info{flex:1;min-width:0;overflow:hidden;}
.profile-info h2{font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:4px;}
.profile-info .handle{font-size:13px;color:var(--accent);margin-bottom:4px;}
.profile-info .address{font-size:11px;color:var(--text-tertiary);font-family:'JetBrains Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.settings-section{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;margin-bottom:12px;
  box-shadow:var(--shadow);
}
.settings-section .header{
  padding:12px 16px;border-bottom:1px solid var(--border);
  font-size:13px;font-weight:600;color:var(--text-primary);
}
.settings-item{
  padding:12px 16px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--border);cursor:pointer;transition:var(--transition);
}
.settings-item:last-child{border-bottom:none;}
.settings-item:hover,.settings-item:active{background:var(--bg-hover);}
.settings-item .icon{font-size:16px;width:22px;text-align:center;flex-shrink:0;}
.settings-item .label{flex:1;font-size:13px;color:var(--text-primary);}
.settings-item .value{font-size:12px;color:var(--text-tertiary);}
.settings-item .arrow{color:var(--text-tertiary);}

/* ═══ MODAL ═══ */
.modal-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(20,30,60,0.4);z-index:1000;
  display:none;align-items:flex-end;justify-content:center;
  backdrop-filter:blur(6px);
}
.modal-overlay.show{display:flex;}
.modal{
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  width:100%;max-width:480px;
  max-height:85vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);
  -webkit-overflow-scrolling:touch;
  padding-bottom:var(--safe-bottom);
}
.modal-header{
  padding:16px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;background:var(--bg-secondary);z-index:1;
}
.modal-header h3{font-size:16px;font-weight:700;color:var(--text-primary);}
.modal-close{
  width:30px;height:30px;border-radius:8px;
  background:var(--bg-tertiary);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;color:var(--text-tertiary);
}
.modal-body{padding:20px;}
.modal-footer{
  padding:12px 20px;border-top:1px solid var(--border);
  display:flex;gap:10px;justify-content:flex-end;
  position:sticky;bottom:0;background:var(--bg-secondary);
}

/* ── Form ── */
.form-group{margin-bottom:14px;}
.form-label{
  display:block;font-size:12px;color:var(--text-secondary);
  margin-bottom:6px;font-weight:500;
}
.form-input{
  width:100%;padding:10px 14px;
  background:var(--bg-tertiary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);font-size:14px;
  transition:var(--transition);
}
.form-input:focus{border-color:var(--accent);background:var(--bg-secondary);}
.form-input::placeholder{color:var(--text-tertiary);}

.form-btn{
  padding:10px 20px;border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;cursor:pointer;
  transition:var(--transition);
}
.form-btn.primary{background:var(--accent);color:#fff;box-shadow:0 2px 10px rgba(70,88,201,0.3);}
.form-btn.primary:hover,.form-btn.primary:active{background:var(--accent-light);}
.form-btn.secondary{background:var(--bg-tertiary);color:var(--text-primary);}
.form-btn.secondary:hover,.form-btn.secondary:active{background:var(--bg-hover);}
.form-btn.danger{background:var(--red);color:#fff;}
.form-btn.full{width:100%;}

/* ═══ ONBOARDING ═══ */
.onboarding{
  display:flex;align-items:center;justify-content:center;
  height:100vh;
  height:100dvh;
  background:linear-gradient(135deg,#F5F6FA 0%,#EEF0FF 50%,#F5F0E8 100%);
  padding:20px;
  padding-top:calc(20px + var(--safe-top));
}
.onboarding-card{
  width:100%;max-width:400px;
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  text-align:center;
  box-shadow:var(--shadow-lg);
  overflow-y:auto;
  max-height:90vh;
  -webkit-overflow-scrolling:touch;
}
.onboarding-logo{
  width:64px;height:64px;border-radius:18px;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
  box-shadow:0 6px 24px rgba(70,88,201,0.35);
  position:relative;
}
.onboarding-logo::after{
  content:'';position:absolute;
  bottom:-6px;left:50%;transform:translateX(-50%);
  width:40px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
}
.onboarding-logo svg{width:38px;height:38px;}
.onboarding-card h1{font-size:22px;font-weight:800;margin-bottom:6px;color:var(--text-primary);letter-spacing:2px;}
.onboarding-card .subtitle{font-size:13px;color:var(--text-secondary);margin-bottom:24px;}

.mnemonic-box{
  background:var(--bg-tertiary);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;margin:14px 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
}
.mnemonic-word{
  padding:6px 8px;background:var(--bg-card);
  border-radius:var(--radius-sm);font-size:12px;
  display:flex;align-items:center;gap:4px;
  color:var(--text-primary);
}
.mnemonic-word .num{color:var(--accent);font-weight:700;font-size:10px;}

.warning-box{
  background:rgba(239,68,68,0.06);border:1px solid rgba(239,68,68,0.2);
  border-radius:var(--radius-sm);padding:10px 12px;
  font-size:11px;color:var(--text-secondary);text-align:left;
  margin-bottom:14px;display:flex;gap:8px;
}
.warning-box .icon{font-size:16px;flex-shrink:0;}

/* ═══ TOAST ═══ */
.toast-container{
  position:fixed;top:12px;left:12px;right:12px;z-index:2000;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
  padding-top:var(--safe-top);
}
.toast{
  padding:10px 16px;border-radius:var(--radius-sm);
  background:var(--bg-secondary);border:1px solid var(--border);
  font-size:13px;box-shadow:var(--shadow-md);
  animation:slideIn .3s ease;display:flex;align-items:center;gap:8px;
  color:var(--text-primary);
  pointer-events:auto;
}
.toast.success{border-left:3px solid var(--green);}
.toast.error{border-left:3px solid var(--red);}
.toast.info{border-left:3px solid var(--accent);}
@keyframes slideIn{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* ═══ EMPTY STATE ═══ */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;text-align:center;color:var(--text-tertiary);
}
.empty-state .icon{font-size:40px;margin-bottom:12px;}
.empty-state .title{font-size:15px;font-weight:600;margin-bottom:4px;color:var(--text-secondary);}
.empty-state .desc{font-size:12px;}

/* ═══ 底部导航栏 (移动端) ═══ */
.mobile-tabbar{
  display:none;
  position:fixed;
  bottom:0;left:0;right:0;
  background:var(--bg-secondary);
  border-top:1px solid var(--border);
  height:calc(56px + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  z-index:500;
  justify-content:space-around;
  align-items:center;
  box-shadow:0 -2px 12px rgba(20,30,60,0.06);
}
.mobile-tabbar .tab-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;height:56px;
  color:var(--text-tertiary);
  font-size:10px;gap:2px;
  cursor:pointer;
  transition:var(--transition);
  position:relative;
}
.mobile-tabbar .tab-item .tab-icon{font-size:20px;line-height:1;}
.mobile-tabbar .tab-item.active{color:var(--accent);}
.mobile-tabbar .tab-item .tab-badge{
  position:absolute;top:6px;right:50%;margin-right:-20px;
  min-width:16px;height:16px;
  border-radius:8px;
  background:var(--red);
  color:#fff;font-size:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;
}

/* ═══ RESPONSIVE ═══ */

/* 手机 & 平板 (≤1024px) — 移动端布局优先 */
@media(max-width:1024px){
  :root{--sidebar-w:0px;}
  
  /* 隐藏桌面侧边栏 */
  .sidebar{display:none !important;}
  
  /* 显示底部导航栏 */
  .mobile-tabbar{display:flex !important;}
  
  /* 主内容区域调整 */
  .main{
    width:100%;
  }
  
  /* Topbar 调整 */
  .topbar{
    height:50px;
    padding:0 10px;
    gap:6px;
    padding-top:var(--safe-top);
  }
  .topbar-title{font-size:16px;}
  .topbar-status{display:none;}
  .topbar-btn{
    padding:6px 10px;
    font-size:12px;
  }
  
  /* Content */
  .content{
    padding:10px;
    padding-bottom:calc(70px + var(--safe-bottom));
  }
  
  /* 钱包页面 */
  .wallet-hero{padding:16px;border-radius:16px;}
  .wallet-total{font-size:28px;}
  .wallet-actions{
    grid-template-columns:repeat(5,1fr);
    gap:4px;
  }
  .w-action{padding:10px 2px;border-radius:10px;}
  .w-action .icon{font-size:18px;}
  .w-action .label{font-size:10px;}
  
  /* 聊天页面 - 单栏模式 */
  .chat-list-panel{
    width:100%;
    border-right:none;
  }
  .chat-layout{
    position:relative;
  }
  .chat-window{
    display:none;
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    z-index:10;
  }
  .chat-layout.show-chat .chat-list-panel{
    display:none;
  }
  .chat-layout.show-chat .chat-window{
    display:flex;
  }
  
  /* 聊天 */
  .chat-header{height:50px;padding:0 10px;}
  .chat-header .name{font-size:14px;}
  .chat-messages{padding:10px;}
  .msg{max-width:85%;}
  .chat-input-bar{padding:8px 10px;}
  .chat-input{font-size:13px;}
  .chat-send-btn{padding:8px 12px;font-size:12px;}
  
  /* 通讯录 */
  .contact-grid{grid-template-columns:1fr;}
  
  /* DApp */
  .dapp-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .dapp-card .banner{height:70px;font-size:28px;}
  .dapp-card .body{padding:8px 10px;}
  
  /* Profile */
  .profile-header{padding:16px;gap:12px;}
  .profile-avatar{width:56px;height:56px;border-radius:16px;font-size:24px;}
  .profile-info h2{font-size:16px;}
  
  /* Modal 底部弹出 */
  .modal-overlay{align-items:flex-end;}
  .modal{
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    max-height:80vh;
  }
  
  /* Onboarding */
  .onboarding-card{padding:24px 20px;max-width:360px;}
  .onboarding-card h1{font-size:20px;}
  
  /* 资产卡片 */
  .asset-card{padding:10px 12px;gap:10px;}
  .asset-icon{width:36px;height:36px;font-size:18px;}
  .asset-name{font-size:13px;}
  .asset-amount{font-size:11px;}
  .asset-value .usd{font-size:13px;}
  
  /* 设置 */
  .settings-item{padding:10px 14px;}
  .settings-item .label{font-size:13px;}
  
  /* 表单 */
  .form-input{font-size:13px;padding:10px 12px;}
  .form-btn{font-size:13px;padding:10px 16px;}
}

/* 手机横屏 / 小平板 — 已在1024px断点中处理 */
@media(min-width:769px) and (max-width:1024px){
  /* 此断点已合并到上面的 ≤1024px 规则中 */
}

/* 平板/小桌面 */
@media(min-width:1025px) and (max-width:1440px){
  .contact-grid{grid-template-columns:repeat(2,1fr);}
  .dapp-grid{grid-template-columns:repeat(4,1fr);}
}

/* 大桌面 */
@media(min-width:1441px){
  .content{padding:24px;max-width:1200px;margin:0 auto;}
  .contact-grid{grid-template-columns:repeat(3,1fr);}
  .dapp-grid{grid-template-columns:repeat(5,1fr);}
  .wallet-total{font-size:42px;}
  .wallet-hero{padding:32px;}
}

/* 超小屏幕 (iPhone SE 等) */
@media(max-width:360px){
  .wallet-total{font-size:24px;}
  .wallet-actions{gap:3px;}
  .w-action{padding:8px 2px;}
  .w-action .icon{font-size:16px;}
  .w-action .label{font-size:9px;}
  .dapp-grid{grid-template-columns:1fr 1fr;gap:6px;}
  .onboarding-card{padding:20px 16px;}
  .mnemonic-box{grid-template-columns:repeat(3,1fr);gap:4px;padding:10px;}
  .mnemonic-word{font-size:11px;padding:5px 6px;}
  .topbar-btn{padding:6px 8px;font-size:11px;}
  .chat-avatar{width:38px;height:38px;font-size:14px;}
}

/* 横屏手机 */
@media(max-height:500px) and (orientation:landscape){
  .onboarding-card{
    max-height:95vh;
    padding:16px;
  }
  .onboarding-logo{width:48px;height:48px;margin-bottom:10px;}
  .onboarding-logo svg{width:28px;height:28px;}
  .onboarding-card h1{font-size:18px;margin-bottom:4px;}
  .onboarding-card .subtitle{font-size:12px;margin-bottom:14px;}
  .mobile-tabbar{height:48px;}
  .mobile-tabbar .tab-item{height:48px;font-size:9px;}
  .mobile-tabbar .tab-item .tab-icon{font-size:18px;}
}

/* 手机端聊天窗口覆盖列表 */
@media(max-width:1024px){
  .chat-layout{position:relative;}
  .chat-window{
    position:fixed;top:0;left:0;right:0;bottom:0;
    z-index:200;background:var(--bg-primary);
    transform:translateX(100%);transition:transform 0.25s ease;
    display:flex;flex-direction:column;
    padding-top:env(safe-area-inset-top);
  }
  .chat-layout.show-chat .chat-window{
    transform:translateX(0);
  }
  .chat-back-btn{display:flex !important;}
  .chat-list-panel{width:100% !important;display:block !important;}
}

/* 可访问性: 减少动画 */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms !important;transition-duration:0.01ms !important;}
}