/* ZenX Trade — Layout: Shell, Header, Nav, Pages */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:-apple-system,'SF Pro Display','Segoe UI',sans-serif;font-size:14px}
#app{display:flex;flex-direction:column;height:100%;max-width:480px;margin:0 auto}

/* HEADER */
#header{padding:calc(var(--safe-top) + 12px) 14px 10px;background:var(--bg);
  border-bottom:0.5px solid var(--border);flex-shrink:0}
#header-inner{display:flex;align-items:center;justify-content:space-between;gap:8px}
#header-left{flex:1;min-width:0}
#header-title-row{display:flex;align-items:center;gap:6px}
#header-title{font-size:16px;font-weight:700;letter-spacing:-0.3px}
#sync-dot{width:7px;height:7px;border-radius:50%;background:#4a5568;flex-shrink:0}
#header-sub{font-size:11px;color:var(--text2);margin-top:1px}

/* ACCOUNT SELECTOR PILL */
#acct-pill{display:flex;align-items:center;gap:4px;background:var(--amber-l);
  border:0.5px solid var(--amber);border-radius:20px;padding:5px 10px 5px 8px;
  cursor:pointer;flex-shrink:0;max-width:220px}
#acct-pill .tag{font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;
  background:var(--amber);color:#000;letter-spacing:0.3px}
#acct-pill .eq{font-size:13px;font-weight:700;color:var(--amber)}
#acct-pill .chevron{color:var(--amber);font-size:10px;margin-left:2px}

/* ACCOUNT DROPDOWN */
#acct-dropdown{position:absolute;top:calc(var(--safe-top) + 56px);right:14px;
  background:#1a2340;border:0.5px solid rgba(212,160,23,0.3);border-radius:var(--r);
  padding:8px;min-width:240px;z-index:500;display:none;
  box-shadow:0 12px 40px rgba(0,0,0,0.5)}
#acct-dropdown.open{display:block}
#content{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--safe-bottom) + 90px);min-height:0}
#nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;
  max-width:480px;background:rgba(10,14,26,0.95);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-top:0.5px solid var(--border);
  display:flex;padding-bottom:var(--safe-bottom);z-index:100}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;
  padding:10px 2px 8px;cursor:pointer;gap:3px;opacity:0.45;transition:opacity 0.2s}
.nav-item.active{opacity:1}
.nav-item svg{width:22px;height:22px}
.nav-item.active svg{stroke:var(--amber)}
.nav-item span{font-size:10px;font-weight:500}
.nav-item.active span{color:var(--amber)}

/* PAGES */
.page{display:none;padding:12px 14px 0}
.page.active{display:block}

/* CARDS */